图 解 React 原理 系列 


来 源 : https:W/github.com/7kms/react-ilustration- 
Series 


基本 概念 


React 应 用 的 安 观 包 结 构 
(web 开发 ) 


原文 : https:Wgithub.com/7kms/react- 


川 ustration-series/blob/main/docs/main/ 
macro-structure.md 


title 
宏观 包 结 构 


React 工程 目录 的 packages 下 包含 35 个 包 
(el17.0.2 版 本 ). 其 中 与 web 开发 相关 的 核心 包 
共有 4 个 , 本 系列 近 20 篇 文章 , 以 这 4 个 包 为 
线索 进行 展开 , 深入 理解 react 内 部 作用 原理 . 


基础 包 结 构 
1. react 


react 基础 包 , 只 提供 定义 react 组 件 
(ReactElement) 的 必要 卫 数 ， 一 般 来 说 需 


要 和 泻 染 器 (=eact-domreact-nat ive) 一 


同 使 用 . 在 编写 react 应 用 的 代码 时 , 大 部 
分 都 是 调用 此 包 的 api. 


2. react-dom 


react 演 染 器 之 一 , 是 react 与 web 平台 

连接 的 桥梁 (可 以 在 浏览 器 和 nodejs 环境 

中 使 用 ), 将 rzeact-reconciler 中 的 运行 

结果 输出 到 web 界面 上 . 在 编写 react 应 

用 的 代码 时 ,大 多 数 场景 下 , 能 用 到 此 包 的 

就 是 一 个 入 口子 

数 ReactDOM.renqder (<App/>，document .getElLeme 


其 余 使 用 的 api, 基本 是 react 包 提供 的 . 


3. react-reconciler 


react 得 以 运行 的 核心 包 ( 综 合 协 

调 *eact-dqom,react,scheduler 各 包 之 间 
的 调用 与 配合 ). 管理 react 应 用 状态 的 输 
入 和 结果 的 输出 . 将 输入 信号 最 终 转 换 成 


输出 信号 传递 给 这 染 器 . 


人 接受 输入 (schedquleUpdateonFiber)， 
将 fiber 树 生成 逻辑 封装 到 一 个 回调 函数 
中 (涉及 fibezr 树 形 结 


构 ，fiber.updateoueue 队 列 , 调和 算法 
等 )， 

。 把 此 回调 函数 
(performSyncWorkOonRoot 或 performConcurrentT 
送 入 scheduler 进 行 调 度 

。 scheduler 会 控制 回调 函数 执行 的 时 机 , 回 
调子 数 执行 完成 后 得 到 全 新 的 fiber 树 

。 再 调用 演 染 器 
(如 react-adom react-native 等 ) 将 fiber 


树 形 结构 最 终 反 映 到 界面 上 
8. Scheduler 


调度 机 制 的 核心 实现 , 控制 

由 react-reconciler 送 入 的 回调 函数 的 
执行 时 机 , 在 concurrent 模 式 下 可 以 实现 
任务 分 片 . 在 编写 react 应 用 的 代码 时 , 同 
样 几乎 不 会 直接 用 到 此 包 提 供 的 api. 


。 核心 任务 就 是 执行 回调 (回调 函数 
由 react-reconciler 提 供 ) 
。 通过 控制 回调 函数 的 执行 时 机 , 来 达到 任 
务 分 片 的 目的 , 实现 可 中 断 泻 染 
二 下村 基 让 直人 


宏观 总 览 


架构 分 层 


为 了 便于 理解 , 可 将 react 应 用 整体 结构 分 为 接口 层 
(api) 和 内 核 层 (core)2 个 部 分 


1 . 接口 层 (apj) react 包 ， 平时 在 开发 过 程 中 使 用 
的 绝 大 部 分 api 均 来 自 此 包 ( 不 是 所 有 ). 在 react 
局 动 之 后 , 正常 可 以 改变 演 染 的 基本 操作 有 3 


< 


。 class 组 件 中 使 用 setstate () 
。function 组 件 里 面 使 用 hook, 并 发 

起 aispatchaction 去 改变 hook 对 象 
。 改变 context( 其 实 也 需要 setstate 


或 ai SPat chaction 的 辅助 才能 改变 ) 


以 上 set state 和 Qispat chaction 者 9 由 react 包 
直接 暴露 . 所 以 要 想 react 工作 , 基本 上 是 调 
用 react 包 的 api 去 与 其 他 包 进 行 交 互 . 


5. 内 核 层 (core) 整个 内 核 部 分 , 由 3 部 分 构成 : 


1 . 调度 器 scheduler 包 ， 核心 职责 只 有 1 对 


就 是 执行 回调 . 


。 把 react-reconciler 提 供 的 回调 函 
数 , 包装 到 一 个 任务 对 象 中 . 
。 在 内 部 维护 一 个 任务 队列 , 优先 级 高 
的 排 在 最 前 面 . 
。 循环 消费 任务 队列 , 直到 队列 清空 . 
5. 构造 器 react-reconciler 包 , 有 3 个 核 


只 
心 职责 


1. 装载 泻 染 器 , 泻 染 器 必须 实 
现 aostconfig 协 议 ( 如 : react-dom)， 
保证 在 需要 的 时 候 , 能 够 正确 调用 泻 
染 器 的 api, 生成 实际 节点 (如 : dom 节 
点 ). 
2. 接收 react-dom 包 (初次 render) 
和 react 包 (后 续 更 新 setstate) 发 起 
的 更 新 请 求 . 
3. 将 fiber 树 的 构造 过 程 包 装 在 一 个 回 
调 函 数 中 , 并 将 此 回调 函数 传 入 
到 scheduler 包 等 待 调 度 . 


泻 染 器 react-dom 包 , 有 2 个 核心 职责 : 


O) 
人 
串 


1 . 二 | 导 zreact 应 用 的 局 动 ( 通 


过 ReactDOM.render)， 

2. 实现 Hostconfig 协 议 ( 源 码 在 
ReactDOMHostContfig.js 中 ), 能 够 
将 react-reconciler 包 构造 出 来 
的 fiber 树 表现 出 来 , 生成 dom 节点 
(浏览 器 中 ), 生成 字符 串 (ssn). 


一 局 


注意 : 
。 此 处 分 层 的 标准 并 非 官方 说 法 , 因为 官方 没 
有 架构 分 层 这 样 的 木 语 . 
。 本 文 只 是 为 了 深入 理解 react, 在 官方 标准 之 外 ， 
对 其 进行 分 解 和 剖析 , 方便 我 们 理解 react 架 
构 . 


内 核 关 系 
现 将 内 核 3 个 包 的 主要 职责 和 调用 关系 , 绘制 到 一 
张 概览 图 上 : 


核心 包 (react-dom, react-reconciler, schedulen) 关 系 图 


Teact-dom 


> -一 enderRootConcunent 
二 -一 一 人 workloop 
fiber 与 dom 相 互 引用 构建 fber 宕 1 
一 IE Rootsync 
ReactDOMHostConfig 人 
一 commnitRoot | 2 
| -一 perormconcurrentWorkOonRoot 
| SchedulerWithReactintegration 
| 
| ee updateContainer 司 同步 schedulesynccallback 一 
ensureRootlsScheduled 有 
events 
一 全 ”scheduleUpdateOnFiber 8 步 一 schedulecalback 。 
scheduler 攻 : 
2 
创建 task unstable_scheduleCallback 所 一 
unstable_cancelCalback ”所 一 一 


requestHostCallback 人 


MessagaChannal 
户 
workLoai 
一 全- callback 


。 红色 方块 代表 入 口 函 数 , 绿色 方块 代表 出 口子 
数 . 

。 package 之 国 的 调用 脉络 就 是 通过 板块 间 的 入 
口 和 出 口 永 数 连 接 起 来 的 . 


通过 此 概 虎 图 , 基本 可 以 表述 react 内 核 层 的 安 观 结 
构 . 后 面 的 章节 , 会 按照 此 图 的 思路 深入 到 对 应 的 模 
块 逐 一 解读 . 


本 文 从 宏观 刀 架构 的 角度 ， 曾 述 了 react 核 心包 之 间 的 
依赖 和 调用 关系 , 使 读者 对 react 架 构 有 简单 的 认识 . 


另外 也 给 读者 提供 一 个 阅读 源码 的 思路 , 先 整体 浏 
览 , 再 深入 分 析 , 各 个 击破 . 


React 工作 循环 (workLoop) 


原文 : https:W/github.com/7kms/react- 
川 ustration-Sseries/blob/main/docs/mainm/ 
workloop.md 


title 
两 大 工作 循环 


在 前 文 (React 应 用 的 宏观 包 结 构 ) 中 , 介绍 了 react 
核心 包 之 间 的 依赖 和 调用 关系 , 并 绘制 出 了 概览 图 . 
在 概览 图 中 , 可 以 看 到 有 两 个 大 的 循环 , 它们 分 别 位 


于 schedquler 和 react reconciler 包 中 : 


工作 循环 示意 图 


performConcurrentWorkOnRoot 


区 SchedulerWithReactintegration 


一 一 多 UpdateContainer scheduleSyncCallback 
上 耻 


schedulecalback 一 


人 闫 


了 
] 


CA ”AS scheduler 所 
1/ 
| 
> 两 大 工作 循环 4 创建 task unstable_ scheduleCallback ”号 一 一 
六 LA oa 
机 unstable_cancelCallback 。 气 一 一 
requestHostCallback 
Messabechannal 
0 本 和 


本 文 将 这 两 个 循环 分 别 表述 为 任务 调度 循环 

和 fiber 构 造 循环 . 接 下 来 从 安 观 角度 前 述 这 两 大 循环 
的 作用 , 以 及 它们 之 间 的 区 别 和 联系 . 更 深入 的 源码 
分 析 分 别 在 scheduler 调度 机 制 和 fiber 树 构造 章节 
中 详细 解读 . 


1. 任务 调度 循环 


源码 位 于 scheauler 它 是 *eact 应 用 得 以 运行 的 
保证 , 它 需 要 循环 调用 , 控制 所 有 任务 (taskx) 的 调度 . 


1. fiber 构 造 循环 


源码 位 于 ReactFiberWworkLoop 5 控制 fiber 树 的 
构 适 , 整个 过 程 是 一 个 深度 优先 遍 . 


这 两 个 循环 对 应 的 js 源码 不 同 于 其 他 闭 包 ( 运 行 时 
就 是 十 包 ), 其 中 定义 的 全 局 变量 , 不 仅 是 该 作用 域 的 


私有 变量 


, 更 用 于 控制 react 应 用 的 执行 过 程 . 


区 别 与 联系 


任务 调度 循环 是 以 二 叉 堆 为 数据 结构 ( 详 见 
react 算法 之 堆 排序 ), 循环 执行 堆 的 顶点 ， 
直到 堆 被 清空 . 

任务 调度 循环 的 逻辑 偏 癌 宏观 , 它 调 度 的 是 
每 一 个 任务 (task), 而 不 关心 这 个 任务 具体 
是 干什么 的 (甚至 可 以 将 schedquler 包 脱 
离 *eact 使 用 ), 具体 任务 其 实 就 是 执行 回 
调 函 数 performsyncWorkonRoot 

或 performconcurrentNWorkOnRoot， 
fibet 构 造 循环 是 以 树 为 数据 结构 , 从 上 至 
下 执行 深度 优先 遍历 ( 详 见 react 算法 之 深 
度 优先 遍历 ). 

fibez 构 造 循环 的 逻辑 偏 癌 具体 实现 , 它 只 
是 任务 (task) 的 一 部 分 

(如 performsyncWworkonRoot 包 


括 : fipbesr 树 的 构造 ，poM 演 染 , 调度 检测 )， 


只 负责 fiber 树 的 构造 . 
6. 联系 


。 fiber 构 造 循环 是 任务 调度 循环 中 的 任务 
(task) 的 一 部 分 . 它们 是 从 属 天 系 , 每 个 任 
务 都 会 重新 构造 一 个 fiber 树 . 


主干 逻辑 


通过 上 文 的 描述 , 两 大 循环 的 分 工 可 以 总 结 为 : 大 循 
环 ( 任 务 调度 循环 ) 负 责 调 度 task, 小 循环 (fiber 构造 
循环 ) 负 责 实 现 task 


react 运行 的 主干 逻辑 , 即将 输入 转换 为 输出 的 核心 步 
桑 , 实际 上 咒 是 围 组 这 两 大 工作 循环 进行 展开 . 


结合 上 文 的 宏观 概览 图 (展示 核心 包 之 间 的 调用 关 
系 ), 可 以 将 react 运行 的 主干 逻辑 进行 概括 : 


1. 输入 : 将 每 一 次 更 新 (如 : 新 增 , 删除 , 修改 节点 
之 后 ) 视 为 一 次 更 新 需求 (目的 是 要 更 新 DoM 节 点 ). 
2. 注册 调度 任务 : react-reconciler 收 
到 更 新 需求 之 后 , 并 不 会 立即 构造 fiper 树 , 而 是 
去 调度 中 心 scheduler 注 册 一 个 新 任务 task, 即 


把 更 新 需求 转换 成 一 个 上 task. 

3. 执行 调度 任务 (输出 ): 调度 中 心 scheduler 通 
过 任务 调度 循环 来 执行 task(task 的 执行 过 程 又 
回 到 了 react-reconciler 包 中 ). 


。 fiber 构 造 循环 是 task 的 实现 环节 之 一 , 循 
环 完 成 之 后 会 构造 出 最 新 的 fiber 树 . 

。 commitRoot 是 task 的 实现 环节 之 二 , 把 最 
新 的 fiber 树 最 终 泻 染 到 页 面 上 ，task 完 


成 . 


主干 逻辑 就 是 输入 到 输出 这 一 条 链 路 , 为 了 更 好 的 性 
能 (如 批量 更 新 ， 可 中 断 泻 染 等 功能 )，react 在 输入 到 输 
出 的 链 路 上 做 了 很 多 优化 策略 , 比如 本 文 讲述 

的 任务 调度 循环 和 fibez 构 造 循环 相互 配合 就 可 以 实 
现 可 中 断 泻 染 . 

总 结 

本 节 从 宏观 角度 描述 了 react 源 码 中 的 两 大 工作 循 
环 . 通过 这 两 个 大 循环 概括 出 react 和 运行 的 主干 逻 
辑 . react-reconciler 和 schedquler 包 代码 量 多 且 
逻辑 复杂 , 但 实际 上 大 部 分 都 是 服务 于 这 个 主干 . 了 
解 这 两 大 循环 , 更 容易 理解 eact 的 整体 运行 链 路 . 


React 应 用 中 的 高 频 对 象 


原文 : https:W/github.com/7kms/react- 
川 Ustration-series/blob/main/docs/mainm/ 
object-structure.md 


title 


在 React 应 用 中 , 有 很 多 特定 的 对 象 或 数据 结构 . 了 
解 这 些 内 部 的 设计 , 可 以 更 容易 理解 react 运行 原 
理 . 本 章 主 要 列举 从 react 启动 到 泻 染 过 程 出 现 频率 
较 高 , 影响 范围 较 大 的 对 象 , 它们 贯穿 整个 react 运 
行 时 . 


其 他 过 程 的 重要 对 象 


。 如 事件 对 象 (位 于 react-dqom/events 保 障 react 
应 用 能 够 响应 ui 交互 ), 在 事件 机 制 章节 中 详细 


解读 . 


提 如 ReactCcontext， ReactProviadqer， ReactCconsumer 对 


象 , 在 context 机 制 章 节 中 详细 解读 . 


react 包 


在 React 应 用 的 宏观 包 结构 中 介绍 过 , 此 包 定 义 
react 组 件 (ReactElement) 的 必要 肯 ， 提供 一 些 操 
作 ReactElement 对 象 的 api. 


所 以 这 个 包 的 核心 需要 理解 ReactElement 对 象 ， 假 
设 有 如 下 入 口 函 数 : 


// 入 口 函 数 
ReactDOM. rendqer (<APP />，qocument .9etElLementi 


可 以 简单 的 认为 , 包括 <app/> 及 其 所 有 子 节点 都 
是 ReactElement 对 象 (在 render 之 后 才 会 生成 子 节 
点 , 后 文 详 细 解 读 ), 每 个 ReactElement 对 象 的 区 别 
在 于 type 不 同 . 


ReactElement 对 象 


其 type 定义 在 sharedq 包 中 . 


所 有 采用 jsx 语 法 书写 的 节点 , 都 会 被 编译 器 转换 ， 
最 终 会 以 React .CTreateElLement (...) 的 方式 ， 创建 
出 来 一 个 与 之 对 应 的 ReactElement 对象. 


ReactElement 对 象 的 数据 结构 如 下 : 


expPort type ReactE1lement = 中 | 
// 用 于 辨别 ReactELement 对 象 
SEESof my 


// 内 部 属性 
type: any，// 表明 其 种 类 
Key: anyv 
人 他 


忆 二 ODS 本 an 


// ReactEibetr 记录 创建 本 对 象 的 Fiber 节 点 ， 还 未 与 


_OwWner: anyv 


dqev 环 境 下 的 一 些 额 外 信息 ， 


_Store: {validatedq: booleany 


人 RN 


_Self: ReactSElement<any>y 
SaaowEhaiaeene 生 二 my 
3 


| 有 


要 特别 注意 2 个 属性 : 


= 


1. key 属 性 在 reconciler 阶 段 会 用 到 , 目前 5 


如 文件 路 径 ， 


- } v 


EE 琶 
只 需 必 


知道 所 有 的 ReactElement 对 象 都 有 key 属性 
( 且 其 默认 值 是 null, 这 点 十 分 重要 , 在 diff 算法 
中 会 使 用 到 ). 


2. type 属 性 峰 定 了 节点 的 种 类 : 


它 的 值 可 以 是 字符 串 ( 代 表 aiv， span 等 dom 天 
点 ), 图 数 (代表 function，class 等 节点 ), 或 者 
react 内 部 定义 的 节点 类 型 
(bortal, context, fragment 等 ) 

。 在 reconciler 阶 段 , 会 根据 type 执行 不 同 的 远 
辑 (在 fiber 构建 阶段 详细 解读 ). 


O 如 type 是 一 个 字符 串 类 型 , 则 直接 使 用 . 
O 〇 O 如 type 是 一 个 Reactcomponent 类 型 , 则 会 
调用 其 render 方法 获取 子 节点 . 
O 如 type 是 一 个 function 类 型 , 则 会 调用 该 
方法 获取 子 节 点 
已 
在 v17.0.2 中 , 定义 了 20 种 内 部 节点 类 型 . 根据 运行 
时 环境 不 同 , 分 别 采 用 16 进 制 的 字面 量 和 symbol 进 


行 表示 . 


ReactComponent 对 象 


对 于 ReactElement 来 讲 ， Reactcomponent 仪 仅 是 诸 


多 type 类 型 中 的 一 种 . 


对 于 开发 者 来 讲 ，Reactcomponent 使 用 非常 高 频 (在 
状态 组 件 章节 中 详细 解读 ), 在 本 节 只 是 先 证 明 它 
是 一 种 特殊 的 ReactElement. 


这 里 用 一 个 简 间 的 示例 , 通过 簿 看 编译 后 的 代码 来 说 
明 


Class APP extenadqs React .Component { 
Fenaqer () { 
七 洒 关 四 人 人 
<QqlivV ClLlassName="app"> 
<headqer>headqer</headqeLr> 
<Content /> 
<footer>footer</footeLr> 
as 
) ;7 


Class Content extendqs React .Component 1{ 
Cenaqer () { 
Ceturn (人 


<React .Ragment > 


人 加 > 
> 外 
2 Ja 
</React .Fragmen 七 > 
) 7 


expPort aqQefault APpP， 


编译 之 后 的 代码 (此 处 只 编译 了 jsx 语法 , 并 没有 将 
class 语法 编译 成 es5 中 的 function), 可 以 更 直观 的 
看 出 调用 逻辑 . 


createElement 渍 数 的 第 一 个 参数 将 作为 创 

建 ReactElement 的 type. 可 以 看 到 content 这 个 变量 
被 编译 器 命名 为 app_content, 并 作为 第 一 个 参数 ( 引 
用 传递 ), 传 入 了 createElement， 


Class APP_APP extendqs react_adefault.a.Compons 


Cenaqer () { 


下 全 蕊 亲 下 而 必 大 让 人 已 订 R 矶 关 半 大 /天气 二 总 忆 玫 站 全 在 3 站 世情 上 .CTer: 


al 
{ 


ClassName: "app'， 


已 岂 下 生生 本 人 


react_ default.a.createElement ('" headqeLr ' ， 


// 此 处 直接 将 content 传 入 ， 是 一 个 指针 传递 


zeact_aqefault.a.createEJLement (APPL_Conts 


freact_ default.a.createElement ('"footeLr '， 


) 


} 


Class APP_Content extenads react_dqefaultl.a.Cor 


Fenaqer () { 
return /*# PURE _ _ */ react_aqefault.a. 
zeact_dqefault.a.-EFzcagmenty 
亲本 机 遇 放 做 于 国 忆 加 民 下 和 二 < 人 
zeact_aqefault.a.createElLement ("P" 
RE 全/ 


zeact_aqefault.a.createElLement ("P "1 
/*# PURE__ */ 


zeact_aqefault.a.createElement ("P"v 


) 7 


上 述 示例 演示 了 Reactcomponent 是 诸 


伟 王 5 


mul] 


muUl]] 


muUl] 


多 ReactElement 种 类 中 的 一 种 情况 , 但 是 由 
于 Reactcomponent 是 class 类 型 , 自 有 它 的 特殊 性 


(可 对 照 源码 , 更 容易 理解 ). 


1. Reactcomponent 是 class 类 型 , 继承 父 
类 component， 拥有 特殊 的 方法 
(setstate,forceUpdate) 和 特殊 的 属性 
(context,updater 等 ). 

2. 在 reconciler 阶 段 , 会 依据 ReactElement 对 象 
的 特征 , 生成 对 应 的 fiber 世上 点 . 当 识 别 
到 ReactElement 对 象 是 class 类 型 的 时 候 , 会 
触发 Reactcomponent 对 象 的 生命 周期 , 并 调用 
其 rendez 方 法 , 生成 ReactElement 子 万 点 . 


其 他 ReactELement 


上 文 介绍 了 第 一 种 特殊 的 ReactElement(class 类 型 
的 组 件 )， 除 此 之 外 function 类 型 的 组 件 也 需要 深入 
了 解 , 因为 Hook 只 能 在 function 类 型 的 组 件 中 使 用 . 


如 果 在 function 类 型 的 组 件 中 没有 使 用 Hook 
(如 : UsesState， useEffect 等 )， 在 reconciler 了 阶段 
所 有 有 天 Hocok 的 处 理 都 会 略 过 , 最 后 调用 


该 function 拿 到 子 节 点 ReactElement. 


如 果 使 用 了 aook, 逻辑 就 相对 复杂 , 涉及 到 Hook 创建 
和 状态 保存 (有 天 Hook 的 原理 部 分 , 在 Hook 原理 

章 世 中 详细 解读 ). 此 处 只 需要 了 解 function 类 型 的 
组 件 和 class 类 型 的 组 件 一 样 ， 是 诸多 ReactElement 


形式 中 的 一 种 . 


ReactLement 内 存 结 构 


通过 前 文 对 ReactElement 的 介绍 ， 可 以 比较 容易 的 
男 出 <App/> 这 个 ReactElement 对 象 在 内 存 中 的 结构 
(reconciler 阶 段 完 成 乙 后 才 会 形成 完整 的 结构 ). 


ReactElement 结 构 (render 后 ) 


typPe=class(App) 


rr 


type= "div” 


props.children 


children 是 一 个 数组 


type=class(Content) 


本 


tyPe=React.Fragment 


props.children= "footer” 


tyPe= "header” 
props.children= “header” 


tyPe= “footer” 


props.9hildren 


children 是 一 个 数组 


7 
props.children= “3” 


人 
props.children= “2” 


本 
props.children= 1” 


。class 和 function 类 型 的 组 件 ,其 子 节点 是 在 
render 之 后 (zeconciler 阶 段 ) 才 生成 的 . 此 处 
只 是 单独 表示 ReactElement 的 数据 结构 . 

。 父 级 对 象 和 子 级 对 象 之 间 是 通 
过 props.children 属 性 进行 关联 的 (与 fiber 树 
不 同 ). 

。ReactElement 虽 然 不 能 算是 一 个 严格 的 树 , 也 


不 能 算是 一 个 严格 的 链表 . 它 的 生成 过 程 是 
顶 向 下 的 , 是 所 有 组 件 节 点 的 总 和 . 

。 ReactElement 树 (暂且 用 树 来 表述 ) 和 fiber 树 是 
以 props .children 为 单位 先后 交替 生成 的 (在 
fiber 树 构 建 章 万 详细 解读 ), 当 ReactElement 树 
构造 完毕 , fiber 树 也 随后 构造 完毕 . 

。 reconciler 阶 段 会 根据 ReactElement 的 类 型 生 
成 对 应 的 fiber 忆 点 (不 是 一 一 对 应 , 比 
如 Fragment 类 型 的 组 件 在 生成 fiber 节 点 的 时 
候 会 略 过 ). 


zeact 上 -上 econciLLeL 包 
在 安 观 结构 中 介绍 过 ， react-reconciler 包 


是 r*eact 应 用 的 中 枢 , 连接 演 染 器 (react-daom 和 调度 


中 心 (scheauler), 同时 自身 也 负责 fiber 树 的 构造 . 


对 于 此 包 的 深入 分 析 , 放 
在 fiber 树 构建 ，reconciler 工作 空间 等 章节 中 . 


此 处 先 要 知道 fibszr 是 核心 , react 体系 的 泻 染 和 更 
新 都 要 以 fiber 作为 数据 模型 , 如 果 不 能 理解 fiber， 
也 无 法 深入 理解 react. 


本 章 先 预 览 一 下 此 包 中 与 fiber 对 象 关联 度 较 高 的 对 


象 . 


Fiber 对 象 


先 看 数据 结构 , 其 type 类 型 的 定义 


在 ReactInternalTypes .js 中 : 


// 一 个 Fiber 对 象 代表 一 个 即将 泻 染 或 者 已 经 泻 染 的 组 件 (: 
// 单个 属性 的 解释 在 后 文 (在 注释 中 无 法 添加 超 链 接 ) 
exXxpDort type Fiper = 全 
ageonkTRaor 
JANE ED SeaTa 
eementIyYypPe: anyv 
上 Eye anmny， 
StateNoaqe: anyv 
ET 了 语 本 
ESERiSSE IESUUIE 
SiIbl1ingd: ERibetL 位 略 可 本 | 
Inadqex: number， 
SS 二 
| 
(((handle: mixedq) => Volid) & { _Sstrindfi 
| Refobject， 
pendqingProps: any，// 从 `ReactElement ;对象 传 
memoizedProps: any，// 上 一 次 生成 子 节 点 时 用 到 闪 
updateoueue: mixedq，// 存储 state 更 新 的 队列 ， : 


memoizedstate: any，// 用 于 输出 的 state， 最 终 ; 
Qqebendqencies: Dependqencies 本 本 本 玖 全 亦 和 1 
modqe: TypeOofMode，// 二 进 制 位 Bitfield, 继承 至 4 


// Effect 副作用 相关 

1 本 可 SR 可 有 7 乓 标志 位 

subtreeElags: Elags，// 奉 代 16.x 版 本 中 的 Eirst 
deletions: Array<Eiber> | nul1l，// 存储 和 将 要 凶 


nextEffect: Fiber | nul1，// 单 向 链表 ， 指 向 下 
firstEffect: Fiber | nul1l，// 指向 副作用 链表 上 
lastEBffect: Fiber | nul1l，// 指向 副作用 链表 中 


// 优先 级 相关 

lanes: Lanes，// 本 fiber 节 点 的 优先 级 
childLanes: Lanes，// 子 节点 的 优先 级 
alternate: Eiber | nul1l，// 指向 内 存 中 的 另 一 个 


// 性 能 统计 相关 (开局 snableProfilerTimezr 后 才 会 纪 

// react-qev-tool 会 根据 这 些 时 间 统 计 来 评估 性 能 

actualDuration?: number，// 本 次 更 新 过 程 ， 本 了 

actualStartTime?: number，// 标记 本 fibezr 节 点 

selfBaseDuration?: number，// 用 于 最 近 一 次 生 万 

treeBaseDuration?: number，// 生成 子 树 所 消耗 上 
下 


属性 解释 : 


fiber.tag: 表示 fiber 类 型 , 根据 ReactElement 

组 件 的 type 进行 生成 , 在 react 内 部 共 定 义 了 

25 种 tag. 

fiber.key: 和 ReactElement 组 件 的 key 一 致 . 

fiber.elementType: 一 般 来 讲 

和 ReactElement 组 件 的 type 一 致 

fiber.type: 一 般 来 讲 和 fiber.elementType 

一 致 . 一 些 特殊 情形 下 , 比如 在 开发 环境 下 为 了 

兼容 热 更 新 (HotReloading), 会 

对 function，class，EorwardRef 类 型 

的 ReactElement 做 一 定 的 处 理 , 这 种 情况 会 区 

别 于 fiber.elementType, 具体 赋值 关系 可 以 查 

看 源 文件 . 

fiber.stateNode: 局 本 全 司 相 人。 下 
点 (比如 : Hostcomponent 类 型 指向 与 fiber 节 点 

对 应 的 dom 节点 ; 根 节点 fiber.stateNode 指 

向 的 是 FiberRoot; class 类 型 节点 其 stateNode 

指向 的 是 class 实例 )， 

fiber.return: 指向 父 节点 

fiber.child: 指向 第 一 个 子 节点 

fiber.sibling': 指向 下 一 个 兄弟 节点 . 

fiber.index':fiber 在 兄弟 节点 中 的 索引 , 如 果 


是 单 太 扣 默 认为 0. 

fiber.ref: 指向 在 ReactElement 组 件 上 设置 的 
ref(string 类 型 的 *ef 除 外 , 这 种 类 型 的 ref 已 经 
不 推荐 使 用 ， reconciler 阶 段 会 将 string 类 型 
的 rsf 转换 成 一 个 function 类 型 ). 
fiber.pendingqProps: 输入 属性 ， 

从 ReactElement 对 象 传 入 的 props. 用 于 

和 fiber.memoizedProps 比 较 可 以 得 出 属性 是 
否 变动 . 

fiber.memoizedProps: 上 一 次 生成 子 节点 时 用 
到 的 属性 , 生成 子 世 点 之 后 保持 在 内 存 中 . 向 下 
生成 子 节点 之 前 叫做 psndaingProps, 生成 子 节 
点 之 后 会 把 eenaingProps 赋 值 

给 memoizedqProps 用 于 下 一 次 比 

较 .pendqingProps 和 memoizedqProps 比 较 可 以 得 
出 属性 是 否 变动 . 

fiber.updateoueue: 存储 update 更 新 对 象 的 队 
列 , 每 一 次 发 起 更 新 , 都 需要 在 该 队列 上 创建 一 
个 update 对 象 . 

fiber.memoizedSstate: 上 一 次 生成 子 节点 之 后 
保持 在 内 存 中 的 局 部 状态 . 
fiber.dependencies: 该 fiber 节点 所 依赖 的 
(contexts, events) 等 , 在 context 机 制 章 世 详 细 


说 明 . 
fipbper.mode: 二 进 制 位 Bitfield, 继 承 至 父 忆 点， 


react 应 用 的 运行 模式 有 关 ( 有 
ConcurrentMode, BlockingMode, NoMode 等 
选项 ). 

fiber.flags: 标志 位 , 副作用 标记 (在 16.x 版 
本 中 叫做 effectTag, 相应 pm)， 

在 ReactFiberFlags.js 中 定义 了 所 有 的 标志 
位 . reconciler 内 段 会 将 所 有 拥有 flags 标 记 
的 节点 添加 到 副作用 链表 中 , 等 待 commit 阶段 
的 处 理 . 

fiber.subtreeFlags: 替代 16.x 版 本 中 的 
firstEffect, nextEffect. 默认 未 开启 , 当 设置 了 
enableNewReconciler=true 才 会 启用 , 本 系列 
只 跟踪 稳定 版 的 代码 , 未 来 版 本 不 会 深入 解读 ， 
使 用 示例 见 源码 . 


默认 未 开启, 当 设置 了 
enableNewReconciler=true 才 会 启用 , 本 系列 
只 跟踪 稳定 版 的 代码 , 未 来 版 本 不 会 深入 解读 ， 
使 用 示例 见 源 码 . 

fiber.nextEffect: 单 向 链表 , 指向 下 一 个 有 副 


个 fiber 节点 . 
fiber.lastEgffect: 指 向 副作用 链表 中 的 最 后 
一 个 fiber 节点 . 


。 fiber.lanes: 本 fiber 节点 所 属 的 优先 级 , 创建 
fiber 的 时 候 设置 . 

。 fiber.childLanes: 子 节点 所 属 的 优先 级 . 

。fipber.alternate: 指向 内 存 中 的 另 一 个 fiber， 
每 个 被 更 新 过 fiber 节点 在 内 存 中 都 是 成 对 出 


现 (current 和 worklnProgress) 


通过 以 上 25 个 属性 的 解释 , 对 fiber 对 象 有 一 个 初 


步 的 认识 . 


最 后 绘制 一 颗 fiber 树 与 上 文中 的 ReactElement 树 
对 照 起 来 : 


ReactElement 结 构 (render 后 ) 


了 
也 


Props。 


Props。 


Fiber Tree 


HostRootFlber 


header footer 


。 这 里 的 fiber 树 只 是 为 了 和 上 文中 
的 ReactElement 树 对 照 , 所 以 只 用 观察 红色 虚 
线 框 内 的 节点 . 根 节点 HostRootFiber 在 react 
应 用 的 启动 模式 章节 中 详细 解读 . 


其 中 <Appy/>， <Content /> 为 classcomponent 类 


型 的 fiber 节 点 AQ 其 余 节 点 都 是 普 


通 Hostcomponent 类 型 节 -DA 点 . 


<Content/> 的 子 节点 在 ReactElement 树 中 

是 React .Fragment, 但 是 在 fiper 树 

中 React .Fragment 并 没有 与 之 对 应 的 fiber 贡 
点 (reconciler 阶 段 对 此 类 型 节点 做 了 单独 处 
理 , 所 以 ReactElement 忆 点 和 fiber 贡 点 不 是 一 
对 一 匹配 ). 


Update 与 UpdateQueue 对 象 


在 fiber 对 象 中 有 一 个 属性 fiber.updateoueue， 是 
一 个 链 式 队列 (即使 用 链表 实现 的 队列 存储 结构 ), 后 
文 会 根据 场景 表述 成 链表 或 队列 . 


首先 观察 update 对 象 的 数据 结构 (对 照 源 码 ): 


exporzt 七 YXPpe UpPadate<sState> = 三 {| 
eventTime: number，// 发 起 updqate 事 件 的 时 间 (17 
lane: Lane，// update 所 属 的 优先 级 


ER 2 
payload: any，// 载 人 乔 ， 根 据 场景 可 以 设置 成 一 个 回 
Ga 名 区 汪 人 八 本 三 汪 TIE 二 O) nul1，// 回调 函数 


next: Update<State> nul1l，// 指向 链表 中 的 下 
上 


typPe Sharedoueue<State> = 1{| 
Penadqing: Update<State> 自己 癌 可 史 
| 


expPort typPpe Updateeueue<sState> = 三 全 | 
baseState: Statey 
fizstBaseUpdqate: Updqate<State> iD 辣 
astBaseUpdate: Update<State> 1 
Sharedq: Sharedqoueue<State>， 
effects: Array<Update<State>> Ti 村 
必 


属性 解释 : 
1. Updqateoueue 


。 basestate: 表示 此 队列 的 基础 state 

。 firstBaseUpdate: 指向 基础 队列 的 队 首 

。 lastBaseUpdate: 指向 基础 队列 的 队 尾 

。 shared: 共享 队列 

。effects: 用 于 保存 有 callback 回 调 函 数 的 


update 对 象 , 在 commit 之 后 , 会 依次 调用 
这 里 的 回调 函数 . 


7. Sharedoueue 


。 pending': 指向 即将 输入 的 upaate 队 列 . 
在 -class 组 件 中 调用 SetsState() 之 后 ， 会 将 
新 的 update 对 象 添加 到 这 个 队列 中 来 . 


9. Upaate 


eventTime: 发 起 updqate 事 件 的 时 间 

(17.0.2 中 作为 临时 字段 , 即将 移出 ) 

lane: update 所 属 的 优先 级 

七 ad: 表示 upaate 种 类 ， 共 4 

种 . Updaatestate,ReplaceState,EForceUpdateyC 
pavyload: 载荷 ，update 对 象 真正 需要 更 新 

的 数据 , 可 以 设置 成 一 个 回调 函数 或 者 对 


象 . 
。 callback: 回调 国 数 . commit 完 成 之 后 会 
调用 . 


next: 指向 链表 中 的 下 一 个 , 由 
于 updateoueue 是 一 个 环形 链表 ， 最 后 一 
个 update next 指 向 第 一 个 upaate 对 象 . 


updateoueue 是 fiber 对 象 的 一 个 属性 , 所 以 不 能 
离 fiber 人 存在 . 它们 之 间 数 据 结构 和 5 引用 关系 如 下 : 


注意 : 
。 此 处 只 是 展示 数据 结构 和 引用 关系 .对 
于 updateoueue 在 更 新 阶段 的 实际 作用 和 运行 
逻辑 , 会 在 状态 组 件 (class 与 functiom) 章 节 中 
详细 解读 . 

Hook 对 象 


Hook 用 于 function 组 件 中 ， 能 够 保持 function 组 件 
的 状态 (与 class 组 件 中 的 state 在 性 质 上 是 相同 的 ， 
都 是 为 了 保持 组 件 的 状态 ). 在 reactel16.8 以 后 , 官方 
开始 推荐 使 用 Hook 语 法 , 常用 的 api 

有 usestate,useEffect,usecallback 等 , 官方 一 共 定 


义 了 1 4 种 HEook 类 型 . 


这 些 api 背后 都 会 创建 一 个 Hooxk 对 象 , 先 观察 aook 对 


象 的 数据 结构 : 


expPort type Hook = { | 
memoizedqState: anyv 
DaseState: anyv 
baseoueue: Updqate<any，any> | nul1， 
Gueue: UpdateQueue<anyr any> [四 可 本 | 
IE Seiels nullv 


| 


ET 
ane: Laney 
SCIOnmE ERA 
eagerReducer: ((S，A) => S) TI 
eeaeemeeaee 旺 S 五 工 / 
next: Update<S，A>， 
Borieyc ReaeERrOEEYNeenE 


| 下 


type Updateoueue<S，RA> = 1{| 
pending: Update<S，RA> | nul1l， 
ESECERE ES) 届 | 属 RNR 
astRendqeredqReducer: ((S，A) => 9) mall， 
1astRendereqdState: S | nul1， 

由 


属性 解释 : 


二 


也 OOK 


memoizedqState: 内 人 存 状态 ， 用 于 输出 成 最 终 
的 fiber 树 


。 baseState: 基础 状态 ， 当 Hook .queue 更 新 过 


后 ， basestate 也 会 更 新 . 
baseQueue: 基础 状态 队列 ， 在 reconciler[ 阶 段 
会 辅助 状态 合 ; 


Gueue: 指 向 一 个 oaate 队 列 


e。 PnexXt: 指 回 该 function 组 件 的 下 一 个 Ecok 对 象 ， 


使 得 多 个 oock 之 间 也 构成 了 一 个 链表 . 


. Hook . queue 和 Hook . baseoueue( 即 Updateoueue 


和 updaate ) 是 为 了 保证 Hook 对 象 能 够 顺利 更 新 ， 
与 上 文 fiber.updateoueue 中 

的 updaateoueue 和 Update 是 不 一 样 的 ( 且 它 们 在 
不 同 的 文件 ), 其 逻辑 会 在 状态 组 件 (class 与 
function) 章 万 中 详细 解读 . 


Hook 与 fibezr 的 关系 : 


在 fiber 对 象 中 有 一 个 属性 fiber .memoizedqstate 指 


向 fiber 节 点 的 内 存 状 态 . 在 function 类 型 的 组 件 
中 fiber.memoizedSstate 就 指向 Hook 队 列 (Hook 队 


列 保存 了 function 类 型 的 组 件 状态 ). 


所 以 fook 也 不 能 脱离 fibez 而 存在 , 它们 之 间 的 引用 
天 系 如 下 : 


ber memeizedState Hook eu pendi SS Na 放 na W 由 是 生 
mepdt not 
是 加 
Hook eue pendan ee 和 
ed 
+ ext 
Hook eut pending- Se 一 next ea next 


一 
> 。 
) 王 大 : 


。 此 处 只 是 展示 数据 结构 和 引用 关系 .对 于 Hook 在 
运行 时 的 实际 作用 和 逻辑 , 会 在 状态 组 件 (class 
与 functionm) 章 节 中 详细 解读 . 


scheduler 包 


如 宏观 结构 中 所 介绍 ，scheduler 包 负责 调度 , 在 内 
部 维护 一 个 任务 队列 (taskQueue), 这 个 队列 是 一 个 
最 小 堆 数 组 ( 详 见 React 算法 之 堆 排序 ), 其 中 存储 了 
task 对 象 . 


Task 对 象 


scheduler 包 中 ， 没有 为 task 对 象 定 义 type， 其 定义 
是 直接 在 js 代码 中 : 


Var newIask = { 


GeaseeeouneeEns 


CalL1lpback， 
PiorityLevel， 
S 七 atTimey 
expDirationTimeyv 
SieaenielSe 5 二 二 
} 
属性 解释 : 


id: 位 移 标 识 

callback': task 最 核心 的 字段 , 指 

向 react-reconciler 包 所 提供 的 回调 函数 . 
priorityLevel: 优先 级 

startTime: 一 个 时 间 戳 ,代表 task 的 开始 时 间 
(创建 时 间 + 延 时 时 间 ). 

expirationTime: 过 期 时 间 . 


sortIndex: 控制 task 在 队列 中 的 次 序 , 值 越 小 


的 越 靠 前 . 


注意 tasxk 中 没有 next 属 性 , 它 不 是 一 个 链表 , 其 顺序 
是 通过 堆 排 序 来 实现 的 (小 顶 堆 数 组 , 始终 保证 数组 
中 的 第 一 个 task 对 象 优先 级 最 高 ). 


整个 taskQueue 队 列 是 一 个 小 顶 堆 数组 


优先 级 最 高 的 task 在 k 本 全 
堆 的 最 顶端 人 


| 
7 
/ 


7 
二 到 


| task2 | | task3 | 


| taskd | | task5 | | task6 | 


本 章 主 要 浏览 了 react 运行 链 路 中 出 现 的 高 频 对 象 ， 
并 对 它们 的 数据 结构 做 出 了 单独 解释 . 提前 了 解 这 些 
对 象 的 数据 结构 , 更 加 有 利于 之 后 对 react 源码 的 深 
入 分 析 . 在 后 续 对 整个 运行 核心 的 解读 中 会 多 次 引用 
到 这 些 对 象 , 并 对 其 在 运行 时 的 具体 作用 深入 解读 . 


reconciler 运作 济 程 


原文 : https:W/github.com/7kms/react- 
川 ustration-series/blob/main/docs/main/ 
reconciler-workflow.md 


title 
reconciler 运作 流程 


带 
局 


通过 前 文安 观 包 结构 和 两 大 工作 循环 中 的 介绍 ， 
对 react-reconciler 包 有 一 定 了 解 . 


此 处 先 归 纳 一 下 zeact-reconciler 包 的 主要 作用 ， 
将 主要 功能 分 为 4 个 方面 : 


1. 输入 : 暴露 api 数 
(如 : scheduleUpdateonFiber), 供给 其 他 包 
(如 react 包 ) 调 用 . 

2. 注册 调度 任务 : 与 调度 中 心 (schedauler 包 ) 交 互 ， 
注册 调度 任务 task, 等 待 任 务 回调 . 


3. 执行 任务 回调 : 在 内 存 中 构造 出 fiber 树 , 同时 
与 与 渔 染 器 (=eact-dom) 交 互 ， 在 内 存 中 创建 出 
与 fiber 对 应 的 poM 节 点 . 


4. 输出 : 与 泻 染 器 (zeact-dom) 交 互 ， 泻 染 DoM 节 点 . 


以 上 功能 源码 都 集中 在 ReactFiberWorkLoop.js 中 . 
现在 将 这 些 功 能 (从 输入 到 输出 ) 串 联 起 来 , 用 下 图 表 
示 : 


中 
hedular 
> 

注册 调度 task wonaoop 
! 任务 调度 


图 中 的 1 ， 27 3 4 步骤 可 以 反映 react-reconciler 
包 从 输入 到 输出 的 运作 流程 ,这 是 一 个 固定 流程 , 每 一 
次 更 新 都 会 运行 . 


分 角 


图 中 只 列举 了 最 核心 的 函数 调用 天 系 ( 其 中 的 每 一 
都 有 各 自 的 实现 细节 , 会 在 后 续 的 章节 中 逐一 展开 ). 
将 上 述 4 个 步骤 逐一 分 解 , 了 解 它 们 的 主要 逻辑 . 


输入 
在 ReactFiberWworkLoop 5 js 中 ， 承接 输入 的 图 数 只 


有 scheduleUpdateonEibez 源 码 地 址 . 

在 react-reconciler 对 外 暴露 的 api 函数 中 , 只 要 
涉及 到 需要 改变 fiber 的 操作 (无 论 是 首次 泻 染 

或 后 续 更 新 操作 ), 最 后 都 会 间接 调 

用 schedquleUpdqateonFiber, 所 

以 scheauleUpdateonFiber 图 数 是 输入 链 路 中 


的 必 经 之 路 . 


// 唯一 接收 输入 信号 的 函数 
exXpPort function ScheduleUpdateOnEiber ( 
fiper: PERiper， 
ane: Laney 
eventTime: number， 
) 有 
// .. .省略 部 分 无 关 代 码 
Const root = markUpdateLaneEFromEiberIToRocot 
If (Lane === SyncLane) { 
人 


(exXecutionContext & Ledg9acyUnbatchedCont 


(executionCcContext & (RendqercrContext 和 


JW 
// 直接 进行 fiber 构造 、 
SnsRormoyneNonkenRooca (eco 元 


} else { 
// 注册 调度 任务 ， 经 过 ` schedule ` 包 的 调度 ，| 


enSsSureRootIsScheduledq (oot，eventTime) ; 


】 
} else { 
// 注册 调度 任务 ， 经 过 ` schequler ` 包 的 调度 ， 间 # 


enSsureRootIsScheduledq (root，eventTime) ; 


逻辑 进入 到 scheduleUpdateonFiber 之 后 ， 后 面 有 2 
种 可 能 


1 . 不 双 过 调度 ， 直接 进 井 行 Eiber 构 造 . 
2. 注册 调度 任务 , 经 过 scheduler 包 的 调度 , 间接 


进行 tiber 构 造 . 
注册 调度 任务 


与 输入 环节 紧密 相连 ，schedauleUpdateonFiber 国 数 


之 后 , 立即 进入 snsureRootIsSscheduled 加 | 数 (源码 


地 址 ): 


// ... 省 略 部 分 无 天 代码 
function ensureRootIsSchedulead (Foot : 了 iibeLrRoc 


// 前 半 部 分 : 判断 是 否 需要 注册 新 的 调度 


Const exXistindgCallpbpackNode = Foot .cal1lLlpacKkfh 
Const PnextLanes = getNextLanes ( 
Ge BE 
xzoot === WOLTKInProdgreSSsRoot ? WwWOrKIDPEodil 
) ;7 
Const mnewCalL1lLpackPriority = TeturnNeXtLDanes 
If _ (nextLanes === NoLanes) { 
etuznmny， 
} 
If _ (existingCcallbackNoade !== nulL1L) 1{ 
Const existingCcal1lbackPriority = opt .ca- 
If (existingCcal1lbackPriority === DewCal1lL 
工人 e 七 已 工 立 ， 


} 
cancelCallback (existindgCallLlpbpackNode) ; 


// 后 半 部 分 : 注册 调度 任务 
et PhnewCallpbackNode，; 
If (newCal1lbackPriority === SyncLanePriorit 


newCallbackNoade = ScheduleSyncCalLlpack ( 


ESEEROmWSVYRCWenkOnReoote nnmaeionnJ 本 Fooct) ， 
) ;7 
}) else if (newCallpackPriority === SyncBat 
newCallpbpackNodaqe = ScheduleCcalJlpack 人 
ImmedqiateSchedulerPriorityyv 
EeeormsyneWonkOnRooesonnainuda cocot) ， 
) ;7 
} else { 
Const SchedulerPriorityLevel = LanePLrIioL: 
newCallbackPriorityv 
) ;7 
newCallpbpackNoaqe = ScheduleCcallpack 人 
SchedulerPriorityLevel， 
PerformConcurrentWorkoOnRoot .binad(nul1， 
) ;7 
} 
Ooe 本 Ca 本 亿 攻 民 OEEE 三 汪 休 各 不 个 天 汪 直 本 人 长 芽 OIL 


xzoot .CallpbackNode = newCalLlpbackNode，; 


ensureRootIsscheduledq 的 远 辑 很 清 ) 分 为 2 部 


分 : 


1. 前 半 部 分 : 判断 是 否 需要 注册 新 的 调度 (如 果 无 
需 新 的 调度 , 会 退出 函数 ) 
2. 后 半 部 分 : 注册 调度 任务 


外 performSsyncWorkOnRoot 或 performConcurrentW 
被 封装 到 了 任务 回调 (schedulecallpack) 
中 

。 等 待 调 度 中 心 执行 任务 , 任务 运行 其 实 就 
是 执行 psrformsyncWorkOonRoot 


或 performconcurrentNWorkOnRoot 


执行 任务 回调 


任务 回调 , 实际 上 就 是 执行 bsrformsyncWorkOonRoot 
或 perzformconcurrentWorkonRoot, 简单 看 一 下 它们 
的 源码 (在 fiber 树 构造 章节 再 深入 分 析 ), 将 主要 逻辑 
剥离 出 来 , 单个 函数 的 代码 量 并 不 多 . 


performSyncWorkOnRoot: 


// ... 省略 部 分 无 天 代码 
EGREESEEREOEmSXCNWOEKEOnReozsoci | 
et anes，; 


et exitStatus， 


Lanes = 9etNextLanes (oot，NoLanes) ; 
// 1. fiber 树 构造 


exXlitStatus = TrendqerRootSync (root，1Lanes) ; 


// 2. 异常 处 理 : 有 可 能 fiber 构 造 过 程 中 出 现 异 常 
IE (root .tadg !== LedgacyRoot && exitStatus := 
YY 


// 3. 输出 : 演 染 fibezr 树 

Const finishedqWork : Fiber = (oot .Currcent .: 
xzoot .finishedqNork = finishedqNork， 

root .finishedqLanes = Lanes:; 


CommeROGGi 人 cot 


退出 前 再 次 检测 ， 是 否 还 有 其 他 更 新 ， 是 否 需要 发 起 
enSsureRootISScheduledq (oot，now() ) ; 


SSE 


performsyncWorkonRoot 的 逻辑 很 ; 青 晰 ，4 分 为 3 部 


分 : 


1. fiber 树 构造 
2. 异常 处 理 : 有 可 能 fiber 构造 过 程 中 出 现 异 常 
3. 调用 输出 


performConcurrentWorkOnRoot 


// ... 省 略 部 分 无 关 代 码 


function PerformCconcurrentWorkoOnRoot (zooct) { 
Const oridginalCallpbpackNode = Foot .calLl1lpacKk'h 


// 1. 刷新 pendqing 状 态 的 effects， 有 可 能 某 些 effe 


const qidqFLIushPassiveEftfects = flLushPassiVs 
If (dqQqiqFlLIushPassiveEftfects) { 
IE (root .calLlbackNoae !== OriginalLCalL1Lba 


/ 任务 被 取消 ， 退 出 调用 
SEE 区 ooD 辣 届 7 
} else { 


多 CUiesemie ea SS 二 订 O 攻 本 人 二 和 筷 和 有 二 G 国 Cont: 


} 
// 2. 获取 本 次 演 染 的 优先 级 


Let Lanes = 9etNextLanes ( 
GeN BE 
xzoot === WOLTKInProdgreSsSSsSRoot ? woOrKIDPEodil 


) 7 
// 3. 构造 fibezr 树 


et exitStatus = endqerRootConcurent (xzoot ， 


了 人 
includqesSomeLane ( 
WoOrKIDProgressRootIncludedLanesy 


WOrKIDProgressRootUpadatedLanesy 


六 
// 如 果 在 rendqer 过 程 中 产生 了 新 的 update， 且 新 uf 
// 那么 最 初 *ender 无 效 ， 寺 弃 最 初 rendqez 的 结果 


PrepPareEFreshsStack (oot，，NoLanes) ; 


}) else if (exitStatus !== RootIncomplete) :| 
// 4. 异常 处 理 : 有 可 能 fiber 构 造 过 程 中 出 现 异 常 
If (exitStatus === RootELTOFed) 1{ 

[0 
所 
[ee 的 09S 全 Salenej<S 00 旧 oXse 王 一 汪 作 So Re po 所 =yeh 
xzoot .finishedqNork = finisheaqNork， 
root .finishedqLanes = anes:; 


// 5. 输出 : 泻 染 fiber 树 
finishCconcurrentRendetr (oot， exitStatusy， 


退出 前 再 次 检测 ， 是 否 还 有 其 他 更 新 ， 是 否 需要 发 起 


enSsuzreRootIsSSchedquled (zoot，now() ) ， 

IE (Foot .calLlLbackNoae === OriginalLCalL1lLbackh 
// 演 染 被 阻 断 ， 返回 一 个 新 的 performConcurrent 
zeturn PerformCconcurentWorkoOnRoot .bina (i 


} 


EDeioEaib 辐 攻 2 


performCconcurrentWorkonRoot 的 逻辑 


与 performsyncWorkonRoot 的 不 同 之 处 在 于 , 对 
于 可 中 断 泻 染 来 的 支持 : 


1. 调用 performconcurrentWorkonRoot 四 数 时 ， 
首先 检查 是 否 处 于 *endaer 过 程 中 , 是 否 需要 恢 
复 上 一 次 泻 染 

2. 如 果 本 次 泻 染 被 中 断 , 最 后 返回 一 个 新 的 
performConcurrentWorkOnRoot 函数 , 等 待 下 
一 次 调用 . 


输出 


ECmma 七 RGCGt- 


// ... 省 略 部 分 无 关 代码 

本 亲人 臣 人 及 本 和 OrmEER 民 GO 臣下 间作 CO 避 臣 着 于 全 仙 Q 全 民 基 让 DO 七 六] 
// 设置 局 部 变量 
Const finishedqWork = oot .finisheaqNWork，; 


const Lanes = root .finishedqLanes，; 


// 清空 FiberRoot 对 象 上 的 属性 
root .finishedqWork = mul1，; 
root .finishedqLanes = NoLanes:; 
xzoot .calLllbackNode = mul1l; 


// 提交 阶段 


et firstEffect = finisheQqNWorKk .frstEffect) 


Se 三 攻 机 本 用 汪 时 | 
Const PrevZEXxecutionContext = exXxecutioncCor 
executionContext |= CommitContext:; 


// 阶段 1: dcom 突 变 之 前 
nexXtEffect = firstEffect， 


3 | 
commitBeforeMutationEffects () ; 
} while (nextEffect !== nul1) ; 


// 阶段 2 : dcom 突 变 ， 界 面 发 生 改 变 
mexXtEffect = firstEffect，; 
| 
CommitMuUtationEffects (oot，，LrenaqerPrioil 
} while (nextEffect !== mnulL1) ，; 


xzoot .CUrrent = finishedqNork，; 


// 阶段 3: _ Layout 阶段 ， 调 用 生命 周期 componentF 
nextEffect = firstEffect， 


ie | 
CommitLayoutEffects (oot，1Lanes) ; 
} while (nextEffect !== mulL1) ，; 
DexXxtEffect = mnul1l，; 
exXxecutionContext = PreVExXxecutionContext ， 
} 
enSsSureRootIsSSchedquled (root，now() ) ， 


etas 有 本 全 四 台风 本 


在 输出 阶段 ,commitRoot 的 实现 逻辑 是 
在 <ocmmitRootImp1 四 数 中 ， 其 主要 逻辑 是 处 理 副 作 
用 队列 , 将 最 新 的 fiber 树 结构 反映 到 DOM 上 . 


核心 允 辑 分 为 3 个 步骤 : 
1. commitBeforeMutationEffects 


。dom 变更 之 前 , 主要 处 理 副作用 队列 中 带 
有 snapshot,Passive 标 记 的 fiper 节 点 . 


3. commitMutationEftfects 


。 dom 变更 , 界面 得 到 更 新 . 主要 处 理 副 作 
用 队列 中 击 
有 Placement，Update，Deletion，Hyqrating 标 
记 的 fibezr 节 点 . 


5D. commitLayoutEffects 


。 dom 变更 后 , 主要 处 理 副作用 队列 中 惠 


有 Upqate callback 标 记 的 fiber 世 点 . 


当 和 


/em 一 口 


本 节 从 宏观 上 分 析 了 reconciler 运作 流程 , 并 将 其 
分 为 了 4 个 步骤 ， 基本 履 盖 了 react-reconciler 包 


的 核心 逻辑 . 


React 应 用 的 局 动 过 程 


原文 : https:W/github.com/7kms/react- 
川 ustration-series/blob/main/docs/mainm/ 
bootstrap.md 


nav title order 
忆 动 过 程 title 
原理 解析 


在 前 文 reconciler 运作 流程 把 reconciler 的 流程 归 
结 成 4 个 步骤 . 


本 章 忆 主要 讲解 =eact 应 用 程序 的 启动 过 程 , 位 
于 react-dom 包 ， 衔接 reconciler 运作 流程 中 的 输入 
步 又. 


在 正式 分 析 源 码 之 前 , 先 了 解 一 下 react 应 用 
的 启动 模式 : 


在 当前 稳定 版 reactel7.0.2 源 码 中 , 有 3 种 启动 方 
式 . 先 引 出 言 网 上 对 于 这 3 种 模式 的 介绍 , 其 基本 说 
明 如 下 : 


1 . edgacy 模 
式 : ReactDOM.render (<App />，rootNode ). 
这 是 当前 React app 使 用 的 方式 . 这 个 模式 可 
不 冯 持 这 些 新 功能 (concurrent 支持 的 所 有 功 
外 


各 E 
月 E 
台 E 
月 E 


// LegacyRocet 
ReactDOM.render (<APP />，qocument .detBElen 


2. Blocking 模 
陈 : ReactDOM.createBlockingRoot (rootNoqde) .rend 
目前 正在 实验 中 , 它 仅 提 供 了 concurrent 模 
式 的 小 部 分 功能 , 作为 迁移 到 <oncurrent 模 
式 的 第 一 个 步骤 . 


帮 人 BTeclnogRece 

// 1. 创建 ReactDOMRoot 对 象 

Const LTreactDOMB1LIockingRoot = ReactDOM .cre 
Qocument . 9etElementById("zoot ' ) ， 

) ;7 

// 2. 调用 renqez 

reactDOMB1LIockingRoot .rendqer (<APP />)， // 


3. Concurrent 模 
式 : ReactDOM.createRoot (ootNode) .render (<App 
目前 在 实验 中 , 未 来 稳定 之 后 ， 打 算 作为 
React 的 默认 开发 模式 . 这 个 模式 开启 了 所 有 
的 新 功能 


/ConearFenRocE 

// 1. 创建 ReactDOMRoot 对 象 

Const TeactDOMRocot = ReactDOM.CTFreateRoct | 
// 2. 调用 renqez 

reactDOMRoot .renqer (<APP />); // 不 支持 回 


注意 : 虽然 17.0.2 的 源码 中 有 createRoot 

和 createBlockingRoot 方 法 (如 果 自 行 构建 , 会 默认 

构建 experimental 版 本 ), 但 是 稳定 版 的 构建 入 口 排 

和 文 两 个 api， 所 以 实际 在 npm 1 react-dom 安 
装 17.0.2 稳 定 版 后 , 不 能 使 用 该 api. 如 果 要 想 体 验 

非 1egacy 模 式 , 需要 显示 安装 alpha 版 本 (或 自行 构 

建 ). 


局 动 沅 程 
在 调用 入 口 函数 之 前 ,reactElement (<App/>) 和 


DOM 对 象 siv#troot 之 间 没 有 天 联 , 用 图 片 表示 如 下 : 


创建 全 局 对 象 {#create-global-obj} 


无 论 Legacy，Cconcurrent 或 Blocking 模 了 式 , react 在 


初始 化 时 , 都 会 创建 3 个 全 局 对 象 
1. ReactDOM (了 BJLGCKRInmG) Root 对象 


。 属于 react- dom 包 , 该 该 对 象 暴 露 
有 rendqer,unmount 方 法 , 通过 调用 该 实例 
的 render 方 法 , 可 以 引导 react 应 用 的 启动 . 


1. fiberRoot 对 象 


。 属 于 react-reconciler 包 , 作 
为 react-reconciler 在 运行 过 程 中 的 全 局 
上 下 文 , 保存 fiber 构建 过 程 中 所 依赖 的 全 
局 状态 . 

。 其 大 部 分 实例 变量 用 来 存 
储 fiber 构造 循环 ( 详 见 两 大 工作 循环 ) 过 程 
的 各 种 状态 .react 应 用 内 部 , 可 以 根据 这 


些 实例 变量 的 值 , 控制 执行 逻辑 . 
4. HostRootEFiber 对 象 


。 属于 react-reconciler 包 , 这 是 react 应 
用 中 的 第 一 个 Fiber 对 象 , 是 Fiber 树 的 根 


EL 一- 3 
节点 ， 节点 的 类 型 是 HostRoot. 


这 3 个 对 象 是 react 体系 得 以 运行 的 基本 保障 , 一 经 
创建 大 多 数 场景 不 会 再 销毁 (除非 卸载 整个 应 


用 z*oot .unmount () 扩 


这 一 过 程 是 从 react-adaom 包 发 起 ， 内 部 调用 
了 react-reconciler 包 ， 核心 流程 图 如 下 (其 中 红色 
标注 了 3 个 对 象 的 创建 时 机 ). 


ct-do 
legacyRenderSubtreelntoContainer 


legacyCreateRootFromDOMContainer 全 


(一 3 种 模式 都 会 创建 ) 


new ReactDOMBlockingRoottcontainer 
Leg ing erRoc 寺 条 
A 
oncurrent 可 《人 
> houpasoohpoaeonane pie es 


Re createBlockingRoot new ReactDOMBlockingRooct(container, 
本 
ce ee 


initialUpdateQueue 登 markContainerAsRoot 


下 面 逐 一 解释 这 3 个 对 象 的 创建 过 程 . 


创建 ReactDOM(Blocking)Root 对 象 


由 于 3 种 模式 局 动 的 api 有 所 不 同 , 所 以 从 源码 上 追 
踪 , 也 对 应 了 3 种 方式 . 最 终 都 new 一 

个 ReactDOMRoot 或 ReactDOMBlockingRoot 的 实例 ， 
需要 创建 过 程 中 kootrag 参 数 , 3 种 模式 各 不 相同 . 
该 RootTag 的 类 型 决定 了 整个 react 应 用 是 否 支持 可 
中 断 泻 染 (后 文 有 解释 ). 


下 面 根据 3 种 mode 下 的 局 动 函 数 逐 一 分 析 . 


legacy 模式 
legacvy 模 式 表面 上 是 直接 调用 ReactDpoM.render， 距 


踪 ReactDOM 5 rendez 后 续 调 


用 edg9acyRendqerSubt reeIntoCcontainezr( 源 码 链 接 ) 


function Leg9acyRendqerSubtreeIntocCcontainer ( 


ParentComponent : ?ReactSCcomponent<any any> 


children: ReactNodqeList， 
Container: Container， 
forceHydqrate: pooleany 


EUo=iel< eeEOiOE 


{ 


Jet root: RootType = (container. reactRoot( 


et fiperRocot ，; 


三 这 


UsGIGOLE 
// 初次 调用 ，zoot 还 未 初始 化 ， 会 进入 此 分 支 
//1. 创建 ReactDOMRoot 对 象 ， 初始化 *eact 应 用 环 


root = Container. reactRootContainer = 1 
Containery， 
forceHydratey 
) ;7 
fipercrRoot = ioot .internalLRocot 
If _ (typeof calLlback === "function") { 
GonsEEerenaliCanbaeEE 三 CaqnoaeIS; 
CailsnesckE 三 二 UnCEnROTDEN ET 
// instance 最 终 指向 childqren( 入 参 : 如 <A 
Const instance = getPublLlicRootInSstan 


GOTTalEalioackescecaleansecaneell; 
} 1; 
} 
// 2. 更 新 容器 
unbatcheaqUpdqates (() => { 
UpdateCcontainer (ChilLadren，， fiberRocot，， Pr: 
间 太 
else { 
// troot 已 经 初始 化 ， 二 次 调用 rendezr 会 进入 
// 1. 获取 FiberRoot 对 象 
TDeTRGOG 上 三 本 瑟 护 O 七 末 关 人 世人 于 万 2ROG 世 ， 


If (typeof calLlback === "function")  { 


const originalCallpack = Callpbackl; 
上 国 GE 站 GESGiR 人 
Const instance = getPubplLicRootInSstan 
GOinaiGaaaoacKERCaaRGInSEaneey: 
} 
】 
// 2. 调用 更 新 
updateContainer (ChilLadreny fiberRocot， Par 


retutrn getPublLicRootInstance (fiperRoot ) ; 


继续 跟踪 1legacycreateRootFromDOMContainer. 最 
后 调 


用 nevw ReactDOMB1LockingRoot (container，， LegacyRocot， 


function LIegqacyCreateRootEromDOMContainer ( 
Coneanmee :Conteaxmie 
forceHydqrate: pooleanyv 
ji:ReoeEyiee | 
Const ShouldHydqrate = 三 
forceHyaQrate 图 ShouldHyaqrateDueToLegacyYyi 
zetutrn createLedacyRoct ( 
Containeryv 


ShoulLdqHyaqrate 


hydrate: 七 Cueyv 
} 


: unaqefinedy， 


exXxpPort function createLedacyRoct ( 
人 IEaaREE Cenmieaaiee 
jaiEaWeiS 全 ceEOIeIEOEOIRSE 
JSeieheN SS 


zeturn new ReactDOMB1LIockingRoot (container， 


通过 以 上 分 析 ,Legacy 模 式 下 调用 ReactDoM.renqer 
有 2 个 核心 步 又: 


1. 创建 ReactDoMBlockingRoot 实 例 (在 
Concurrent 模式 和 Blocking 模式 中 详细 分 析 
该 类 ), 初始 化 react 应 用 环境 . 

2. 调用 upaatecontainer 进 行 更 新 . 


Concurrent 模式 和 Blocking 模式 


concurrent 模 式 和 Blocking 模 式 从 调用 方式 上 直接 
可 以 看 出 


1 . 分 别 调 用 ReactDoM. CeateRocot 


和 ReactDoM.createBlockingRoot 他 | 
建 ReactDoOMRoot 和 ReactDoMBlockingRoot 实 
例 

2. 调用 ReactDoMRoot 和 ReactDOMB1L1ockingRoot 


买 例 的 rendaez 方 法 


exXpPort function createRoct ( 
GOREaNEE COnmieaanie 开 ee 
jayeniE 汪 全 ceEOIeIEEOINESE 

JE SeieneN SS 


retutrn new ReactDOMRoot (container， options) 


eXpPort function createBlockingRocet ( 
Container: Containeryv 
GEiiemsez Room 
JRGOETV CE 


zeturn new ReactDOMB1ockingRoot (container， 


米 续 查 看 ReactDoMRoot 和 ReactDoMBLockingRoot 对 


人 


function ReactDOMRoot (Container : ContaineLzy， 
// 创建 一 个 fiberRoot 对 象 ， 并 将 其 挂 载 到 thils ._int 
this._ internalRocot = CreateRootImPp1 (contaii 
) 
UDC 民 seeDOMRBTGcCRnoRCOOtES 
Container: Containey 
EeeRRoeeEacr 
Opeiienmsveg Reee@ptnensF 
) 1 
// 创建 一 个 fiberRoot 对 象 ， 并 将 其 挂 载 到 this ._int 


this. internalLRoct = createRoctImPJL (contaii 


ReactDOMRoot .PrototypPe .rendqer = ReactDOMB1J1ocl 
children: ReactNodqeList， 
Eee 
GormseeGG 七 旺旺 已 站 FS 天 着 忆 全 下 站 与 二 民 oGt， 
// 执行 更 新 
SEE SGeiEETD RSIGl0 Dees iaR 全 cc RE 区 ob 训 响 酌 


] ; 


ReactDOMRoot .PrototypPe.unmount = ReactDOMB1] oo 
GOIRSIEIESGOOLE 二 名 帮 下 二 天 帮 ESEOEESRSSEY 
人 GOmSE 本 CGOmteaane 三 本 人 人 人 世人 名 提 全 本 1 全 G 
// 执行 更 新 
QQaeeEoAEaaenO OO 人 FF> 1{ 
UnmarkContainercrAsRoot (Container) ，; 


人 7 


ReactDOMRoot 和 ReactDoMBLockingRoot 有 相同 的 特 


性 


1. 调用 createRootImpl 创 建 tiberRoot 对 象 , 并 将 
其 挂 载 到 this._ internalRoot 上 . 

2. 原型 上 有 zendaer 和 unmount 方 法 , 且 内 部 都 会 调 
用 upaatecontainer 进 行 更 新 . 


创建 fiberRoot 对 象 {#fcreate-root-impl} 


无 论 哪 种 模式 下 , 在 ReactDoM(Blocking)Root 的 创 
建 过 程 中 , 都 会 调用 一 个 相同 的 上 函 

数 createRootImp1, 查看 后 续 的 油 数 调用 , 最 后 会 创 
建 ftiberRoot 对 象 (在 这 个 过 程 中 , 特别 注意 RootTag 
的 传递 过 程 ): 


// 注意 : 3 种 模式 下 的 tag 是 各 不 相同 (分 别 是 Concurzent 


this. internalRoot = CreateRootImP1L (containei 


ECEOneCFeaesRocETmTIE 


Container: Containeryv 


Eee ROGER 
SR ES IERSSEORE ET 


) 


// .. .省略 部 分 源码 (有 关 hyqrate 服 务 端 泻 染 等 ， 暂 
// 1. 创建 tiberRoot 
Const troot = CreateContainer (Container， 七 


// 2. 标记 dom 对 象 ， 把 som 和 fiber 对 象 关联 起 来 
markContainertrAsRoot (root .CUrrenty，， containei 
// .. .省 略 部 分 无 关 代 码 


旺 后 EUGITEE 所 Le ， 


exXxpDort function createContainer ( 
GoneEERUSISIDOSSRRLGGOEEEINISIEEF 
EeexenedR=i 民 
hydrate: booleanyv 
YaQeataeneaaaae 芭 sm SuspenseHyadratI 
) : OPadueRocot { 
// 创建 fiberRoot 对 象 


retutrn createFiperRoot (containerInfo tadyv 


创建 HostRootFiber 对 象 


在 createFiberRoot 中 ， 创建 了 react 应 用 的 首 


个 fiber 对 象 , 称 


为 HostRootEiber (fiber.tag = HostRocot) 


eXpPort function createEFiberRocot ( 
SEEDUONEOSIUWANEGS EN 
IEELe SexehedRie 有 
hydrate: booleanyv 
Yeseeneaiaaioae|s2 攻 和 UNLIST SuspenseHyadratI 
EeeROoE 
// 创建 fiberRoot 对 象 ， 注意 RootTag 的 传递 


Const Lrcoot : FRRiberRocot = (new FipercrRootNode 


// 1. 这 里 创建 了 ` react ` 应 用 的 首 个 ` fibez ` 对象， 
Const uninitializedqFiper = CreateHostRoocotE : 
xzoot .CUrrent = uninitializedqFiper，; 
UninitializedqFPipbper.stateNodqe = Foot，; 

// 2. 初始 化 HostRootEiber 的 updqateoueue 


InitializeUpadateQueue (uninitializedqFiber) ; 


1 认 二 加 eg 全 exene 


在 创建 HostRoeotFiber 时 , 其 中 fiber.modqe 属 性 , 会 
与 3 种 RootTag 


(concurrentRoot,BlockingRoot,LegacyRoot) 关 联 


eXpPort function CreateHostRootEiper ( 臣 agl: Root 


et modqe，; 


If (tag === ConCcurrentRoot) { 

edge 三 看 ComeursneneMoeoae BJockingMode St 
}) else if (tad === BlLockinoRocot ) { 

mode = BlockingMode | StrictMoqde; 
} else { 

modqe = NOoOMode，; 


} 


zetutrn CreateEiper (HostRocot，nul1l，nulL1L， mc 


注意 :fiber 树 中 所 有 节点 的 moae 都 会 

和 HostRootFiber.mode 一 致 (新 建 的 fiber 节点 , 其 
mode 来 源 于 父 节 点 ), 所 以 HostRootFiber.mode 非 
常 重要 , 它 决 定 了 以 后 整个 fiber 树 构 建 过 程 . 


运行 到 这 里 , 3 个 对 象 创 建成 功 ，react 应 用 的 初始 
化 完毕 . 


将 此 刻 内 存 中 各 个 对 象 的 引用 情况 表示 出 来 : 


1. legacy 


cortainerl ， 
1 瞩 、 zw TS 
人 9- - -WarmaRaof -- peeront - -anmant--- -人 区 ……- Ce 


1 
1 
1 
上 呈 N T 
| 本 ss | 
0 1 
ConcumrentMode 
ReactDOMR 
ol = Trieimalhoat- -全 洁 - 二 Gurrart- -人 ee 
| 
1 


1 上 
1 
1 
可 上 
1 ， 2 “人 小 ! 
1 - 1 
| 币 HE | 和 alcckingMeodej 
| 全 鸭 -…。 -人 寺 站 人 
1 1 
1 上 


1. 3 种 模式 下 ,HostRootFiber .mode 是 不 一 致 的 


2. |legacy 下 ，dqiv#root 和 ReactDOMB1ockingRoot 


之 间 通 过 _reactRootcontainer 关 联 . 其 他 模式 
是 没有 关联 的 

3. 此 时 reactElement (<App/>) 还 是 独立 在 外 的 ， 
还 没有 和 目前 创建 的 3 个 全 局 对 象 关联 起 来 


调用 更 新 入 口 


1. legacy 回 
到 legacyRenderSubtreeIntocontainer 陋 数 


中 有 : 


// 2. 更 新 容器 
unbatcheaqUpadates (() => { 
UpdateContainer (chilLadreny fiberRoot，，， Parent 


同居 


1. concurrent 和 blocking 


在 ReactDoM(Blocking)Root 原 型 上 有 renaer 方 


法 


ReactDOMRoot .PrototypPe .rendqer = ReactDOMB1J1ocl 
childqren: ReactNodqeList， 


JSNAemtela 


oilroiee 三 可 ia 攻 遇 Si 攻 月 有 elielee 
// 执行 更 新 


UPpaatecContainer (chiladaren，， Looct，null， | nul1l) 


] ; 


相同 点 : 


1. 3 种 模式 在 调用 更 新 时 都 会 执 
行 updaatecontainer. updatecontainer 虽 数 串 


联 了 react-dom 与 react-reconci1Ter， 之 后 的 还 
辑 进 入 了 react-reconciler 包 . 


不 同 点 : 


1 ， legacy 下 的 更 新 会 先 调 用 unbatcheqdUpdates， 
更 改 执行 上 下 文 为 LegacyUnbat chedContexXt， 
之 后 调用 upaatecontainer 进 行 更 新 . 


2. concurrent 和 blocking 不 会 更 改 执行 上 下 文 ， 
直接 调用 upaatecontainer 进 行 更 新 . 


继续 跟踪 upaatecontainer 虽 数 


expDort function updateContainer ( 


element : ReactNodqeList， 


container: OpadueRocot， 
ParentComponent : ?ReactSCcomponent<any， any> 
SERIESRGOT 

) : Dane { 
SOON De SIE 三 本 COREERNIISS NSS SB 
// 1. 获取 当前 时 间 难 ， 计算 本 次 更 新 的 优先 级 
Const eventTinme = TiedquestEvVentTime () ; 


Const Lane = LedquestUpdateLane (CuUrtent ) ; 


// 2. 设置 fiber.updateoueue 
Const_ update = CreateUpdate (eventTITime，， 1Lan 
Update.payload = { element 】}; 
Callback = callpack === Unadqefinedq ? nul1l 
CSCEE 三 本 让 DO 可可 村 天 

Update.calLlback = callpback，; 
} 


endcdueueUpadate (Curtent，，update) ; 


// 3. 进入 reconciler 运 作 流 程 中 的 ` 输入 ` 环节 
ScheduleUpdateoOnEiber (Curtent，，，1Laney event” 


Ceturn ane， 


updatecontainer 阳 数位 于 react-reconciler 包 中 ， 
它 串联 了 react-dqom 与 react-reconciler. 此 处 暂时 
不 深入 分 析 updatecontainer 图 数 的 具体 功能 , 需要 


天 注 其 最 后 调用 了 ScheduleUpdateoOnEiber， 


在 前 文 xeconciler 运作 流程 中 , 重点 分 析 
过 schequleUpdateonFibezr 是 输入 阶段 的 入 口 约 数 . 


所 以 到 此 为 止 ， 通过 调用 react-aom 包 的 api 
(如 : ReactDOM.rende)， react 内 部 经 过 一 系列 运 
转 , 完成 了 初始 化 , 并 且 进 入 


了 reconciler 运作 流程 的 第 一 个 阶段 . 


可 中 断 演 染 


react 中 最 广为人知 的 可 中 断 泻 染 (render 可 以 中 断 ， 

部 分 生命 周期 水 数 有 可 能 执行 多 

次 ， UNSAEFEE_componentWilL1IMount,UNSAEFE_componentWIILIKE 
只 

在 HostRootEFiber.mode === ConcurrentRoot BLockina 
会 开局. 如果 使 用 的 是 legacy, 即 通 

过 ReactDOM.render (<APP/>， qdqom) 这 种 方式 启动 

时 HostRootFiber.mode = NOMode， 这 种 情况 下 无 论 

是 首次 render 还 是 后 续 update 都 只 会 进入 同步 工 

作 循 环 ， reconciliation 没 有 机 会 中 断 ， 所 以 生命 周 


对 于 可 中 断 泻 染 的 宣传 最 早 来 自 2017 年 Lin Clark 的 
演讲 . 演讲 中 前 述 了 未 来 react 会 应 用 fiber 架 

构 ，reconciliation 可 中 断 等 (13:15 秒 ). 在 v16.1.0 
中 应 用 了 fiber. 


在 最 新 稳定 版 v17.0.2 中 ， 可 中 断 泻 染 虽 然 实 现 , 但 是 
并 没有 在 稳定 版 暴露 出 api. 只 能 安装 alpha 版 本 才 
能 体验 该 特性 . 


但 是 不 少 开 发 人 员 认 为 稳定 版 本 的 react 已 经 是 可 中 
断 演 染 (其 实 是 有 误区 的 ), 大 概率 也 是 受到 了 各 类 宣 


传 文章 的 影响 . 前 端 大 环境 还 是 比较 浮躁 的 , 在 当下 ， 
需要 静 下 心 来 学 习 . 
总 结 


本 章节 介绍 了 react 应 用 的 3 种 启动 方式 . 分 析 了 局 
动 后 创建 了 3 个 关键 对 象 , 并 绘制 了 对 象 在 内 存 中 
的 引用 关系 . 启动 过 程 最 后 调用 updatecontainer 进 
入 react-reconciler 包 ,进而 调 

用 schedulerUpdateonFiber 国 数 ， 

与 reconciler 运 作 流 程 中 的 输入 阶段 相 衔接 . 


React 中 的 优先 级 管理 


原文 : https:Wgithub.com/7kms/react- 
川 ustration-series/blob/main/docs/mainm/ 


priority.md 
title 
优先 级 管理 
React 内 部 对 于 优先 级 的 管理 , 根据 功能 的 不 同 
分 


为 LanePrioritv， SchedulerPriority，ReactPEIorILY 
种 类 型 . 本 文 基 于 reacte17.0. 2 梳理 源码 中 
的 优先 级 管理 体系 . 


React 是 一 个 声明 式 , 高 效 且 灵活 的 用 于 构建 用 户 界 
面 的 JavaScript 库 . React 团队 一 直 致 力 于 实现 高 
效 演 染 , 其 中 有 2 个 十 分 有 名 的 演讲 : 


1.2017 年 Lin Clark 的 演讲 中 介绍 了 fibsr 架 构 
和 可 中 断 泻 染 . 
2. 2018 年 Dan 在 JSConf 冰岛 的 演讲 进一步 介 


绍 了 时 间 切 片 (cime slicing) 和 异步 演 染 


(suspense) 等 特性 . 
演讲 中 所 展示 


的 可 中 断 泻 染 ,时 间 切 片 (time slicing) ,异步 泻 染 (suspense) 


等 特性 , 在 源码 中 得 以 实现 都 依赖 于 优先 级 管理 . 


企 Reacta17 ,。 2 源码 中 ， 一 共有 :2 套 优先 级 体系 
和 1 套 转 换 体系 , 在 深入 分 析 之 前 , 再 次 回顾 一 下 
(reconciler 运作 流程 ): 


React 内 部 对 于 优先 级 的 管理 , 贯穿 运作 流程 的 4 个 
阶段 (从 输入 到 输出 ), 根据 其 功能 的 不 同 , 可 以 分 为 


3 种 类 型 : 


1. fiber 优 先 级 (LanePriority): 位 
于 react-reconciler 包 ， 也 就 
是 Lane (车 道 模型 ) . 

2. 调度 优先 级 (SchedulerPriority): 位 
于 scheduler 包 . 

3. 优先 级 等 级 (ReactPriorityLevel) : 位 
于 react-reconciler 包 中 


的 schedulerwithReactIntegqration 网 负责 


上 述 2 套 优先 级 体系 的 转换 . 


预备 知识 


在 深入 分 析 3 种 优先 级 之 前 , 为 了 深入 理 
解 LanePriority， 需要 先 了 解 Lane, 这 这 
是 *eacte17.0.0 的 新 特性 . 


Lane (车 道 模型 ) 


英文 里 词 1ane 翻 译 成 中 文 表示 "车 道 , 航道 "的 
意思 , 所 以 很 多 文章 都 将 Lanes 模 型 称 
为 车 道 模型 


Lane 模 型 的 源码 在 ReactFiberLane.js, 源码 中 大 量 
使 用 了 位 运算 (有 关 位 运算 的 讲解 , 可 以 参考 React 


算法 之 位 运算 ). 


首先 引入 作者 对 zane 的 解释 (相应 的 pn, 这 里 简单 概 
括 如 下 : 


1. Lane 类 型 被 定义 为 二 进 制 变量 , 利用 了 位 掩 码 
的 特性 , 在 频繁 运算 的 时 候 占 用 内 存 少 , 计算 速 
度 快 . 


。 Lane 和 Lanes 吉 是 单数 和 复数 的 天 系 , 代表 
单个 任务 的 定义 为 ane, 代表 多 个 任务 的 
定义 为 Lanes 


3. Lane 是 对 于 expirationTime 的 重 构 , 以 前 使 
用 sxpirationTime 表 示 的 字段 ， 都 改 为 了 1lane 


zenadqerExpirationtime -> rendqerLanes 
Update.expirationTime -> upaate .ane 
fipbper.expirationTime -> fiber.Lanes 
人 Ca 析 到 本 本 On 王 TTWE 本 三 之 loesr.chij] 


OO 二 ESERENoingims 硬 anmgEookeeiaPEtPenc 


4. 使 用 Lanes 模 型 相 比 sxpirationTime 模 型 的 优 


1. zanes 把 任务 优先 级 从 批量 任务 中 分 离 出 
来 , 可 以 更 方便 的 判断 单个 任务 与 批量 任 
务 的 优先 级 是 否 重 寻 . 


// 判断 : 单 task 与 batchTask 的 优先 级 是 否 重 ; 
//1. 通过 expirationTime 判 断 

Conskees 王 SS 长 王 人 COsa 开 mnEsiiEe 基 三 本 下 oO1 
//2. 通过 Lanes 判 断 

Const isTaskIncludqedqInBatchnh = ( 臣 aSsK & 


// 当 同 时 处 理 一 组 任务 ， 该 组 内 有 多 个 任务 ， 且 
// 1. 如 果 通 过 expirationTime 判 断 . 需要 维 
Const isTaskIncluadqedqInBatch = 

七 aSKPTiIoritY <= highestPriorityInRa 


七 aSKPLioriLtY >= LowestPLr1Ior1ILYInRan 


//2. 通过 Lanes 判 断 


Const isTaskIncludqedqInBatch = (七 aSK & 


2. Lanes 使 用 单个 32 位 二 进 制 变量 即 可 代表 
多 个 不 同 的 任务 , 也 就 是 说 一 个 变量 即 可 
代表 一 个 组 (group), 如 果 要 在 一 个 group 
中 分 离 出 单个 task, 非常 容易 . 


在 sxpirationTime 模 型 设计 之 初 ， 


react 体系 中 还 没有 Suspense 异步 
泻 染 的 概念 . 现在 有 如 下 场景 : 有 3 
个 任务 , 其 优先 级 A > B > c, 正常 
来 讲 只 需要 按照 优先 级 顺序 执行 就 
可 以 了 . 但 是 现在 情况 变 了 :A 和 C 
任务 是 cpU 密 集 型 , 而 B 是 Io 密 集 型 
(Suspense 会 调用 远程 api, 算是 IO 
任务 )， 

即 Atcpu) > B(Io) > ccpu). 此 
时 的 需求 需要 将 任务 B 从 group 中 分 
离 出 来 , 先 处 理 cpu 任务 和 c. 


// 从 group 中 删除 或 增加 task 


//1. 通过 expirationTime 实 现 

// 0) 维护 一 个 链表 ， 按 照 单个 task 的 优先 级 顺 

// 1) 删除 单个 task (从 链表 中 删除 一 个 元 素 ) 

七 aSK .Prev.next = 七 aSK.next; 

// 2) 增加 单个 rask (需要 对 比 当 前 task 的 优先 

Let current = queue:， 

While (task.expirationTime >= CULTLent 
CULCLEent = CULTCEent .mexXt， 

七 aSK .next = CUTEent .nexXt，; 


CULTTent .next = 七 aSK; 


// 3) 比较 task 是 否 在 group 中 
Const 1sTaskIncludqedqInBatchn = 
七 aSKPFiority <= highestPriorityInRa 


七 aSKPLiIoriILY >= OowestPLr1iIor1ILYInRan 


// 2. 通过 Lanes 实 现 

// 1) 删除 单个 ask 

batchofTasks &= ~ 七 aSK; 

// 2) 增加 单个 ask 

SENOETSEEE | SS 

// 3) 比较 task 是 否 在 grzoup 中 

Const isTaskIncludqedqInBatchnh = ( 蕊 aSsK & 


通过 上 述 伪 代 码 , 可 以 看 到 ranes 的 优越 
性 , 运用 起 来 代码 量 少 , 简洁 高 效 . 


5. Lanes 是 一 个 不 透明 的 类 型 , 只 能 
在 ReactFiberLane.js 这 个 模块 中 维护 . 如 果 要 
在 其 他 文件 中 使 用 , 只 能 通 
过 ReactFiberLane.js 中 提供 的 工具 函数 来 使 
用 . 


分 析 车 道 模型 的 源码 (ReactFiberLane 5 js 中 )， 可 以 


得 到 如 下 结论 : 


1. 可 以 使 用 的 比特 位 一 共有 31 位 (为 什么 ? 可 以 


参考 React 算法 之 位 运算 中 的 说 明 ). 

2. 共 定 义 了 18 种 车 道 (rane/Lanes) 变 量 , 每 一 个 
变量 占有 1 个 或 多 个 比特 位 , 分 别 定义 为 Lane 
和 Lanes 类 型 . 

3. 每 一 种 车 道 (ane/Lanes) 都 有 对 应 的 优先 级 , 所 
以 源码 中 定义 了 18 种 优先 级 (LanePriority). 

4. 占有 低位 比特 位 的 ane 变 量 对 应 的 优先 级 越 高 


。 最 高 优先 级 为 syncLanePriority 对 应 的 车 
道 
为 SyncLane = 0b0000000000000000000000000014 
。 最 低 优 先 级 为 offscreenLanePriority 对 
应 的 车 道 
为 offscreenLane = 0b1000000000000000000004 
优先 级 区 别 和 联系 
在 源码 中 , 3 种 优先 级 位 于 不 同 的 js 文件 , 是 相互 独 
立 的 . 
注意 : 


相 LanePriority 和 schedqulerPriority 从 命名 上 
看 , 它们 代表 的 是 优先 级 
s ReactPriorityLevel 从 命名 上 看 ， 它 代表 的 


是 等 级 而 不 是 优先 级 , 它 用 于 衡 


量 Ianepriority 和 schedqulerPriority 的 等 级 . 


LanePriority 


LanePriority: 属于 react-reconciler 包 ， 定义 
于 ReactFiberLane . js( 见 源码 )，. 


eXpPort const SyncLanePriority: LanePriority := 
exXxpDPort const SyncBatchedLanePriority: IanePL: 


Const InputDiscreteHydqrationLanePriority: Lai 


exXxport const InputDiscreteLanePriority: Ianeri 


| 
| LE 


Const offscreenLanePriority: LanePrior1iItYy 


| 
AT 


expPort const NoLanePriority: LanePrioriIitYy 


与 fiber 构 造 过 程 相 天 的 优先 级 


(如 fiber .upadateQueue,fiber . lanes) 都 使 


用 LanePrioritvy. 


由 于 本 节 重 点 介绍 优先 级 体系 以 及 它们 的 转换 关系 ， 
关于 Lane (车 道 模型 ) 在 fiber 树 构造 时 的 具体 使 用 ， 


在 fiber 树 构造 章节 详细 解读 . 


SchedulerPriority 


SchedulerPriorItY， 属于 schedquler 包 ， 定义 
于 schedqulerPriorities . js 中 ( 见 源码 ). 


eXpPort const NOoPriority = 0); 

exXpPort const ImmedqiatePriority = 工 ; 
SxBEorteeeensauUseBOCKRIOREEIOETEY 旺 三重 为 ， 
SaeiaeecSe NSEDDeEE 
eXpPort const LOowPriority = 4 


7 
EXEomkEeonmS 旺 下 Q 由 全 甩 下 于 @ 下 区 yX 三 琶 5 


与 schedquler 调 度 中 心 相 关 的 优先 级 使 
用 schedaulerPriority. 
ReactPriorityLevel 


reactPriorityLeVe1l， 属于 react-reconciler 包 ， 
定义 于 SchedulerWithReact Integration.]Jjs 中 ( 见 


源码 ). 


exXpDPort const ImmediatePriority: ReactPziorIti 


EXEBoTP 上 EConms 可 SEEBLECEIRDTOREOIOETIE ResaeEPTLCILO1 
人 区 世 OF 本 CeDS 忆 NGEEmailEETETCOERE 展会 3 总 相 下 OOEHLtYLDes 
eXpPort const LowPriority: ReactPziorityLeve1l 
eXpPort const IdqlePriority: ReactPziorityLeve] 
// NOoPLriority 1s the absence of Priority 。 Al1s 


eXPort const NOoPriority: ReactPriorityLevel := 


LanePriority 与 SchedulerPriority 通 


过 ReactPriorityLeve1 进 行 转换 


转换 天 系 


为 了 能 协同 调度 中 心 (schedauler 包 ) 和 fiber 树 构造 
(zeact-reconciler 包 ) 中 对 优先 级 的 使 用 ， 则 需要 转 
换 schequlerPriority 和 LanePriority， 转换 的 桥梁 


正 是 ReactPriorityLeve1. 


在 schedqulerwithReact 工 各 七 全 可 天 有 七 1 js 中 ， 可 以 互 


转 schequlerPriority 和 ReactPLziorityLevVe1l: 


// 把 SchedulerPriority 转换 成 ReactPriotrityLe 

exXpPort function detCurrentPriorityLeVelL () : Rs 

SWitch (Scheduler_getCurrentPriorityLevel () 
case Scheduler_ImmediatePriority : 


zetutrn ImmediatePzrior1ity， 


case Scheduler_UserBlockingPriority : 
SENSOEIUISISGIEeXelca eeSa ENL7 

case Scheduler_ NormalLPriority : 
SEN 的 几 NGNSIIE 靖 有 SS 共 EX 7 

Case Scheduler LowPriIorILLY : 
eVRNSRGNSeES 7 

case Scheduler IdqlePriority : 
eeuenasiolieREEECONEY 

aefault : 


InVariant (false "Unknown Piority eV 


// 把 ReactPriorityLevel 转换 成 ScheduletrPriorz 
function reactPriorityToScheadu1LerPriority (er 
Switch (reactPriorityLeve1L) ({ 
case ImmedqiatePriority : 
zetutrn Scheduler_ ImmediatePzriority:， 
Case UserBlockingPriority : 
retutrn Scheduler_ UserBlockingPriorityYy， 
Gass 量 NGEmaaiRGR ESY 
下 会 巷 肌 下 用 要 呈 亿 有 全 辣 疝 二 三 共生 NG 和 BIGOESREY 
Case LOowPLr1IOrILtLY : 
zetutrn Scheduler LowPriIOF1ILY:， 
Case IdqlePriority : 
retutrn Scheduler_ IdlePriority， 
Qqefault : 


InVariant (false "Unknown Piority eV 


在 ReactFiberLane.js 中 , 可 以 互 转 LUanePriority 


和 ReactPziorityLevVe1l: 


exXpPort function SchedulerPzriorityToLanePr1ior: 
SchedulerPriorityLeve1lL: ReactPtiorityLevel， 
ameEEETEGOEEREY 
Switch (schedulerPriorityLeve1L) ({ 
case ImmedqiateSchedqulerPriority : 
NeDETRTSSR oa 
// ... 省 略 部 分 代码 
Qefault : 


ENETAS 人 请 


exXPort function LanePzriorityToSchedulLerPrior: 
外 EVENSaIEOEEA DIEUISISOISRE 
) : ReactPriorityLevel { 
SwWeasechaesnmeEeoNe 
Case SyncLanePriority : 
case SyncBatchedqLanePrior1ityY : 


return ImmedqiateSchedqulLlerPriority， 


// ..。. 省略 部 分 代码 
Q@eaulit 
InVariant ( 
falseyv 
TSZS Re Ee 本 加 EEOT 二 二 下 和 下风 1S 工 : 
由 meEREOEOETEEY 


) 7 


优先 级 使 用 


通过 reconciler 运作 流程 中 的 归纳 ，reconciler 从 输 

入 到 输出 一 共 经 历 了 4 个 阶段 , 在 每 个 阶段 中 都 会 
涉及 到 与 优先 级 相关 的 处 理 . 正 是 通过 优先 级 的 灵活 

运用 ，React 实 现 

了 可 中 断 演 染 , 时 间 切 片 (time slicing) ,异步 泻 染 (suspense) 


等 特性 . 


人 接 下 来 就 正式 进入 
react 源码 分 析 中 的 硬 核 间 
(scheduler Ra 


本 文 介 绍 了 react 源码 中 有 天 优先 级 的 部 分 , 并 梳理 
了 3 种 优先 级 之 间 的 区 别 和 联系 . 它们 贯穿 了 
reconciler 运作 流程 中 的 4 个 阶段 , 在 react 源码 中 
所 占用 的 代码 量 比较 高 , 理解 它们 的 设计 思路 , 为 接 
下 来 分 析 调 度 原 理 和 fibezr 构 造 打 下 基础 . 


React 调度 原理 (schedulen) 


原文 : https:W/github.com/7kms/react- 
川 ustration-series/blob/main/docs/main/ 
Scheduler.md 


title 
调度 原理 


在 React 运行 时 中 , 调度 中 心 (位 于 schedquler 包 )， 
是 整个 React 运行 时 的 中 相 ( 其 实 是 心脏 ), 所 以 理 
解 scheduler 调 度 , 就 基本 把 握 了 React 的 命 门 . 


在 帝 入 分 析 之 前 , 建议 回顾 一 人 下 往 期 三 scheduler 相 
天 的 文章 (这 3 篇 文章 不 长 , 共 10 分 钟 能 浏览 完 ): 


。 React 工作 循环 : 从 安 观 的 角度 介绍 React 体 
系 中 两 个 重要 的 循环 , 其 中 任务 调度 循环 就 是 本 
文 的 主角 . 

。reconciler 运作 流程 : 从 宏观 的 角度 介绍 
了 react-reconciler 包 的 核心 作用 , 并 
把 reconciler 分 为 了 4 个 阶段 . 其 中 第 2 个 阶 


段 注 册 调 度 任务 串联 了 scheduler 包 
和 react-reconciler 包 , 其 实 就 是 任务 调度 循环 
中 的 一 个 任务 (task). 

。 React 中 的 优先 级 管理 : 介绍 了 React 体系 中 
的 3 中 优先 级 的 管理 , 列 出 了 源码 
中 react-reconciler 与 scheduler 包 中 关于 优 
先 级 的 转换 思路 . 其 中 schedulerpPriority 控 
制 任 务 调 度 循环 中 循环 的 顺序 . 


了 解 上 述 基础 知识 之 后 ， 再 谈 scheduler 原 理 ， 其 买 
就 是 在 大 的 框架 下 去 添加 实现 细 世 , 相对 较为 容易 . 
下 面 就 正式 进入 主题 . 

调度 实现 

调度 中 心 最 核心 的 代码 , 在 
SchedulerHostConfig.default.js 中 . 

内 核 


该 js 文件 一 共 导 出 了 8 个 池 数 , 最 核心 的 逻辑 , 融 集 
中 在 了 这 8 个 函数 中 : 


export let requestHostCcallback; // 请 求 及 时 回 计 


尼 六 加 GE 
色 葡 已 CT 
全 文 记 所 七 
人 XPOT 
人 XPOTL 
守 广 可 加 七 


ee 的 加 


我 们 知道 


面 基于 普 


et 
工 et 七 
et 
工 et 七 
工 e 七 
工 et 
et 


cancelHostCcallback; // 取消 及 时 回调 
redquestHostTimeout; // 请 求 延 时 回调 
cancelHostTimeout; // 取消 延 时 回调 : 
shouldqyYieldToHost; // 是 否 让 出 主线 程 
redquestPaint; // 请 求 绘制 : 设置 neex 
getCurrentTime; // 获取 当前 时 间 

forceFrameRate; // 强制 设置 yieldqiIn 


react 可 以 在 nodejs 环境 中 使 用 , 所 以 在 
不 同 的 js 执行 环境 中 ，, ) ee 有 区 别 . 下 


通 浏 览 器 环境 , 对 这 8 个 孜 数 逐一 分 析 : 


1. 调度 相 天 : 请 求 或 取消 调度 


。 redquestHostCallback 


cancelHostCallback 


。 redquestHostTimeout 


cancelHostTimeout 


这 4 个 函数 源码 很 简洁 , 非常 好 理解 , 它们 的 目的 就 


是 请 求 执行 


(或 取消 ) 回 调 函数 . 现在 重点 介绍 其 中 


的 及 时 回调 ( 延 时 回调 的 2 个 函数 暂时 属于 保留 api， 
17.0.2 版 本 其 实 没有 用 上 ) 


// 接收 Messagechannel 消息 


Const PerformWworkUntilDeadqline = () => |{ 
// .. .省 略 无 关 代 码 
If (schedquledqHostCallpack !== mul1lL) { 
Const currentTinme = getCurtrentTime () ; 
// 更 新 qeadline 
dqeadline = CurrentTime + YieldqInterval; 


// 执行 callback 


ScheduledqHostCalL1lback (hasTimeRemainingy 


} else { 
1ISMessagqeLoopPRunning = false，; 
} 
网 
Const _ channel = new MessagdechannelL () ; 
OSIESCEE IEDOUAISeeNSIE2 
channel.Port1l1.onmessage = PerformWorkUntL 上 IIDex: 


// 请 求 回 调 
redquestHostCallpack = function(calLllLpack) { 
// 1 工 . 保存 cal1back 
ScheduledqHostCalLllback = Callpbpack; 
If (!1SsSMessageLoopPRunning) { 
人 = 七 YUe， 


// 2. 通过 Messagechannel 发 送 消息 
Port -PostMessage (nul1) ，; 


] ; 


// 取消 回调 
GanmecsaostCaioa 志 三 机 和 metOnmEn 居于 


ScheduledqHostCallback = Pul1l，; 
】} 7 


很 明显 , 请 求 回调 之 

后 schequledqHostcallback = CallLpback， 然后 通 
过 Messagechannel 发 消息 的 方式 触 

发 performworkUntilDpeadline 国 数 , 最 后 执行 回 


调 scheduledqHostcallback. 


此 处 需要 注意 : Mes sagechanne1 在 浏览 器 事件 循环 
中 属于 宏 任务 , 所 以 调度 中 心 永 远 是 异步 执行 回调 浮 


效 . 


业 时 间 切 片 (time slicing) 相 天: 执行 时 间 分 割 ， 
让 出 主线 程 (把 控制 权 归 还 浏览 器 , 浏览 器 可 以 
处 理 用 户 输入 ,UI 绘制 等 紧急 任务 ). 


getCurrentTime: 获取 当前 时 间 
shouldYieldToHost: 是 否 让 出 主线 程 

。 [requestPaint: 请 求 绘制 

forceFrameRate: 强制 设置 vieldaIinterval( 从 


源码 中 的 引用 来 看 , 算 一 个 保留 男 数 , 其 他 地 方 


没有 用 到 ) 


const LocalPerformance = Perzcformance， 
// 获取 当前 时 间 
detCurrentTime = () => localPerformance .now ( ) 


// 时 间 切 片 周期 ， 默 认 是 5ms (如 果 一 个 task 运 行 超过 该 周 
Let YieldqInterval = 5); 


et qdqeadqline = 0); 


const maxYieldqIntervalLl = 300:; 
et needqsPalint = false，; 
const scheduling = navVigator.schedqulindg; 


// 是 否 让 出 主线 程 
shouldqYie1ldqToHost = function() 1{ 
Const _ currentTinme = getCurtrentTime () ; 
If (CurrentITime >= aqQeadqline) 1{ 
if (needsPaint || schedquling.isInputPend: 
// There 1s either a penadqind Paint Or : 
16S ED 的 0 IEaeDTs 玉 
} 
// There's no pendqind input. only yielad : 
// yieldq interval . 
zeturn CUTTrentTime >= maxXxYie1ldqIntLerVval 
} else { 
// There's stil1 time left in the frame . 


] ; 


Ceturn false，; 


// 请 求 绘制 

requestPaint = function() 1{ 
needqsPaint = 七 TUe， 

} 1; 

// 设置 时 间 切 片 的 周期 

forceEFrameRate = function (fps) { 
TCRESSE 0 人 川 枚 自 5S 芝 2 的) 于 


] ; 


// Usinda console['error'] to evaqe Babel 
GGRmse 下 elseGense 避 区 
IfEorCeFErameRate 七 akeSs a Positive int ps 
"forcing frame rates higher than 125 
) ;7 
SG 
) 
人 人 所) 和 | 
yieldInterval = Math.floor(1000 / fps) ; 
} else { 
// reset the framerate 


yieldInterval = 5); 


这 4 个 函数 代码 都 很 简洁 , 其 功能 在 注释 中 都 有 解 


注意 shoulayieldqroHost 的 判定 条 件 : 


。 CUrtrentTime >= qeadqline: 只 有 时 间 超 
过 aeaaqline 之 后 才 会 让 出 主线 程 (其 


中 aeadline = currentTime + yieldInterval). 


O vieldIinterval 默 认 是 5ns, 只 能 通 
过 forceFrameRate 函 数 来 修改 (事实 上 在 
v17.0.2 源码 中 , 并 没有 使 用 到 该 水 数 ). 
O 〇 O 如 果 一 个 task 运 行 时 间 超 过 5ms, 下 一 
个 task 执 行 之 前 , 会 把 控制 权 归 还 浏览 器 . 
。 navidator.schedqulind.isInputPenading () : 
这 facebook 官方 贡献 给 Chromium 的 api, 现 
在 已 经 列 入 W3C 标准 (有 具体 解释 ), 用 于 判断 是 
否 有 输入 事件 (包括 :input 框 输入 事件 , 点 击 事 
件 等 ). 


介绍 完 这 8 个 内 部 函数 , 最 后 浏览 一 下 完整 回调 的 
实现 performWorkUntilDeadline( 逻 辑 很 清晰 , 在 注 
释 中 解释 ): 


Const performWworkUntilDeadqline = () => |[{ 


if (scheduledqHostCcalLlpback !== mul1L) { 
Const currentTime = 9etCurrentTime (); // 
deadline = CUrrentTime + YieldqInteLrval / 
const hasTimeRemainind = 七 Tue， 
Eye 


// 3. 执行 回调 ， 返 回 是 否 有 还 有 剩余 任务 
Const hasMoreWork = ScheduledqHostCal1bx: 
If (!hasMoreWork) { 
// 没有 剩余 任务 ， 退出 
1ISMessagqeLoopPRunning = false，; 
ScheduledqHostCallpback = nul1l，; 
} else { 


port .bostMessage (nul1l); // 有 剩余 任务 ， 
} 


Jeaecnteeeso) 
port .postMessage (nul1L); // 如 有 异常 ， 重 前 


站 EOWEE2G@E， 


】 
} else { 


1SMessageLoopPRunnind = false'; 


】 
needsPaint = false; // 重 置 开 关 


] ; 


分 析 到 这 里 , 可 以 得 到 调度 中 心 的 内 核实 现 图 : 


调度 中 心 核心 实现 


- 


， 调度 拓 制 1 1 消费 作 和 队列 | 
| 加 | 
1 essageChanel | ] 
requestHostCallback 1 有 (EventLoop) 上 i -preformWorkUntilDeadine 
N 1 
canceiHostCallback | 
SS AAA 
| 和 
+ 
Y hasMoreWork 
和 
# 
Exit 


说 明 : 这 个 流程 图 很 简 丫 , 源码 量 也 很 少 ( 总 共 不 到 
80 行 )， 但 是 它 代 表 了 schedquler 的 核心 ， 所 以 精华 其 
实 并 不 一 定 需要 很 多 代码 . 


任务 队列 管理 


通过 上 文 的 分 析 , 我 们 已 经 知道 请 求 和 取消 调度 的 实 
现 原理 . 调度 的 目的 是 为 了 消费 任务 , 接 下 来 就 具体 
分 析 任 务 队列 是 如 何 管 理 与 实现 的 . 


在 Scheduler.js 中 , 维护 了 一 个 taskQueue, 任务 队列 
管理 就 是 围绕 这 个 taskoueue 展 开 . 


// Tasks are storedq on a min heap 
Var taskoueue = []，; 


Var 七 ImerQueue = []，; 


谢 


taskoueue 是 一 个 小 顶 堆 数组 , 关于 堆 排 序 的 详 
细 解 释 , 可 以 查看 React 算法 之 堆 排序 . 

源码 中 除了 taskoueue 队 列 之 外 还 有 一 

个 timeroueue 队 列 . 这 个 队列 是 预 留 给 延 时 任 
务 使 用 的 , 在 react@17.0.2 版 本 里 面 , 从 源码 
中 的 引用 来 看 , 算 一 个 保留 功能 , 没有 用 到 . 


创建 任务 


在 unstable_schedulecallback 了 图 数 中 (源码 链接 ): 


// 省 略 部 分 无 天 代码 


function unstable_scheduleCcallback (Pior1ityLs 


// 1. 获取 当前 时 间 

Var CuUrrentTinme = getCurrentTime () ; 

YaESEamETime 

If (typeof options === "object' && options 
// 从 上 函数 调用 关系 来 看 ， 在 v17.0.2 中 ,所 有 调用 ui 
// 所 以 省 略 延 时 任务 相关 的 代码 


else { 


CE 玫 


StartTime = CUrrentTime， 


} 
// 2. 根据 传 入 的 优先 级 ， 设置 任务 的 过 期 时 间 expiz 


Var 七 Imeout ; 


SWecNEUEOCIEYeEdSH 


Case ImmedqiatePrior1ity : 


} 


七 imeout = IMMEDIATE_PRIORITY TIMEOUT ; 
Dreak， 

CasesUseBeocIRnoRETOESNEYL 
七 Imeout = USER_BLOCKING_PRIORITY _ TIMEOT 
Dreak， 

Case IdqlePriority : 
meEGGLE 三 汪 下 由 让 世 汪 民 民 下 @RTTYEETRTME GDUT7 
Dreak， 

Case LowPLr1IoOrILLY : 
七 Imeout = LONW_PRIORITY _ TIMEOUT ; 
Dreak， 

CasemNGTEmailiEEaGOEE 

aefault : 
七 Imeout = NORMAL PRIORITY TIMEOUT ; 


Dreak， 


Var expirationTime = startTime + 七 imeout，; 
// 3. 创建 新 任务 


Var newTask = ({ 


] ; 


eg 和 EEE<FeLGeESEDES 本 
G@aa 同 ae 
PEziorityLevel， 
startTimey 
exDirationTimey 


SomEneSs 小 于 


SEE 人 EYE 
// 省 略 无 关 代 码 v17 .0 .2 中 不 会 使 用 
} else { 
newIask .SortIndex = expirationTime， 
// 4. 加 入 任务 队列 
Push (askQueue， newTITaSsk) ; 
// 5. 请 求 调度 
If (!1sHostCallbackSchedquledq && !1isPerfol 
1ISsSHostCallbackSchedquled = 七 Tue，; 
zedquestHostCalLlpack (LushWorKk) ; 


} 


zeturn PnewIaSskK; 


逻辑 很 清晰 (在 注释 中 已 标明 ), 重点 分 析 tcask 对 象 的 
各 个 属性 : 


Var newTask = ({ 
id: taskIqCountezr++，// id: 一 个 自 增 编 号 
callback，// callpback: 传 入 的 回调 国 数 
PziorityLevel，// PrziocityLevel: 优先 级 等 级 
startTime，// startTime: 创建 task 时 的 当前 时 间 
expbirationTime，// expirationTime: task 的 过 


Seieenaiois<R 三 


] ; 


newTask .sortInadqeXx = exXxpPirationTime; // sortIi 


消费 任务 


创建 任务 之 后 , 最 后 请 求 调 

度 *eauestHostcallback (flushWork) (创建 任务 源码 
中 的 第 5 步 )，flushwork 孙 数 作为 参数 被 传 入 调度 
中 心 内 核 等 待 回调 . reauestHostcallback 国 数 在 上 
文 调度 内 核 中 已 经 介绍 过 了 , 在 调度 中 心中 , 只 需 

一 个 事件 循环 就 会 执行 回调 , 最 终 执 行 Elushwork. 


// 省 略 无 天 代码 

function f1LIushWork (hasTimeRemaining inital'” 
// 1. 做 好 全 局 标记 ， 表示 现在 已 经 进入 调度 阶段 
1ISsSHostCallbackSchequledq = false，; 


IsSPerformingWork = 七 Tue，; 
Const PreviousPriorityLevVel = CuULTLentPTLIOL: 
0 


// 2. 循环 消费 队列 

zeturn WwWorkLoopP (hasTimeRemainindg initIIa- 
2 

// 3. 还 原 全 局 标记 

CULTLTentTIask = mnul1l:; 


CUTLTentPLiIoOLCLILYLeVvel = PEeVZiouSPLIOLILYIL 


IsSPerformingWork = false，; 


flushwork 中 调用 了 workLoop. 队列 消费 的 主要 远 辑 
是 在 werkLoop 国 数 中 , 这 就 是 React 工作 循环 一 文中 
提 到 的 任务 调度 循环 . 


// 省 略 部 分 无 天 代码 
function workLoopP (hasITimeRemaining initIILalI: 
let currentTime = initialTime; // 保存 当前 时 
curtentTask = peek(taskoueue); // 获取 队列 中 
while (currentTask !== nul1) !{ 
ER 
CUTTentTITask .expirationTime > currentTir 
(!hasTimeRemalining || shoulqyieldqToHost 
JE 
// 虽然 currentTask 没 有 过 期 ， 但 是 执行 时 间 超 it 


DreaKk， 

} 

Const callbpack = CuUrrentTask .calLlback'; 

If (typeof calLlback === "function") { 
CULTLTentTIask .calLllback = nul1l，; 
CULTLTentPILiIoOLCLILYLeVvel = CULTTentITaSKk .PE 


Const qiadqUserCcalL1lbackTimeout = CuUrrent-” 


// 执行 回调 
CnS 臣 本 CCm 人 下 3 直下 有 人 3 同志 三 二 Calloack(: 
CurrentTinme = getCurrentTime () ; 
// 回调 完成 ， 判断 是 否 还 有 连续 (派生 ) 回调 
if (typeof continuationcal1lback === "fi 
// 产生 了 连续 回调 (如 fibezr 树 太 大 ， 出 现 了 中 
CULTLTentTask .callback = ContinuationcC: 
} else { 
// 把 currentTask 移 出 队列 
IE (CurtentTask === Peek (askQueue) ) 


Pop (askQueue) ; 


} 

} else { 
// 如 果 任 务 被 取消 (这 时 currentTask.callbacl 
Pop (askQueue) ; 

} 

// 更 新 currentTask 


CULTLTentTask = Peek (askQueue) ; 
】 
If (CurrentTask !== mul1l1) 1{ 

return true; // 如 果 task 队 列 没 有 清空 ， 返回 tx 
} else { 


return false; // task 队 列 已 经 清空 ， 返回 fals 


workLoop 就 是 一 个 大 循环 , 虽然 代码 也 不 多 , 但 是 非 
常 精髓 , 在 此 处 实现 

了 时 间 切 片 (time slicing) 和 fiber 树 的 可 中 断 泻 染 . 
这 2 大 特性 的 实现 , 都 集中 于 这 个 while 循 环 . 


每 一 次 while 循 环 的 退出 就 是 一 个 时 间 切 片 , 深入 分 
析 while 循 环 的 退出 条 件 : 


1. 队列 被 完全 清空 : 这 种 情况 就 是 很 正常 的 情况 ， 
一 气 呵 成 , 没有 遇 到 任何 阻碍 . 

2. 执行 超时 : 在 消费 taskoueue 时 , 在 执 
行 task.callback 之 前 , 都 会 检测 是 否 超时 , 所 
以 超时 检测 是 以 task 为 单位 . 


。 如 果 某 个 task .callback 执 行 时 间 太 长 
(如 : fibez 树 很 大 , 或 逻辑 很 重 ) 也 会 造成 
超时 

。 所 以 在 执行 task .callback 过 程 中 , 也 需要 
一 种 机 制 检 测 是 否 超时 , 如 果 超 时 了 就 立 


刻 暂停 task 了 callback 的 执行 . 


时 间 切 片 原理 


消费 任务 队列 的 过 程 中 , 可 以 消费 1~n 个 task, 甚至 
清空 整个 queue. 但 是 在 每 一 次 具体 执 


行 task.callback 之 前 都 要 进行 超时 检测 , 如 果 超 时 
可 以 立即 退出 循环 并 等 待 下 一 次 调用 . 


可 中 断 泻 染 原理 


在 时 间 切 片 的 基础 之 上 , 如 果 单 个 task.callback 执 
行 时 间 就 很 长 (假设 200ms). 就 需要 task. callback 
自己 能 够 检测 是 否 超时 , 所 以 在 fiber 树 构造 过 程 中 ， 
每 构造 完成 一 个 单元 , 都 会 检测 一 次 超时 (源码 链接 )， 
如 遇 超 时 就 退出 fiber 树 构造 循环 , 并 返回 一 个 新 的 回 
调 函 数 (就 是 此 处 的 continuationcallback) 并 等 待 

下 一 次 回调 继续 未 完成 的 fiber 树 构造 . 


节 流 防 拌 { 萃 hrottle-debounce} 


通过 上 文 的 分 析 ， 已 经 覆盖 了 scnheauler 包 中 的 核心 
原理 . 现在 再 次 回 到 r*eact-reconciler 包 中 ， 在 调度 
过 程 中 的 天 键 路 径 中 , 我 们 还 需要 理解 一 些 细节 . 


在 reconciler 运作 流程 中 总 结 的 4 个 阶段 

中 ， 注 册 调 度 任务 属于 第 2 个 阶段 , 核心 允 辑 位 

于 ensureRootIssScheduled 耻 数 中 . 现在 我 们 已 经 理 
解 了 调度 原理 , 再 次 分 析 ensureRootIsscheduled( 源 
码 地 址 ): 


// ... 省 略 部 分 无 天 代码 
function ensureRootIsScheduled(zoot : 了 1IbeLrRoc 
// 前 半 部 分 : 判断 是 否 需要 注册 新 的 调度 


Const exXxistindcCallpbpackNodqe = Foot .calLl1lLlpacKk'h 


Const nextLanes = getNextLanes ( 

EGG 

xzoot === WOLTKInProdgreSSsRoot ? WwWOrKIDPEodil 
) ;7 
Const nmnewCalL1lLpackPriority = LeturnNeXtLDanes 
If (nextLanes === NoLanes) { 

etuzcny; 


} 
// 节 流 防 拌 


If _ (existingCcalLllbackNoade !== nul1L) 1{ 
COonSieEeEXaESE CasacCKRBEOEOGTEYS 三 obt .ca: 
If (existingCcal1lpbackPtriority === DewCal1lL 
EDiGig 


】 

cancelCallback (existingCallLpbpackNodqe) ; 
】 
// 后 半 部 分 : 注册 调度 任务 省 略 代 码 . . . 


// 更 新 标记 
zoot .CallpbackPriority = newCalL1lpbacKkPzHLorIt1 
xzoot .CallbackNode = newCalLlpbackNode，; 


正常 情况 下 ，ensureRootIsscheduled 卫 数 会 
与 scheduler 包 通信 ， 最 后 注册 一 个 task 并 等 待 回调 . 


1. 在 task 注 册 完 成 之 后 , 会 设置 fiberRoot 对 象 上 
的 属性 (fiberRoot 是 react 运行 时 中 的 重要 全 
局 对 象 , 可 参考 React 应 用 的 启动 过 程 ), 代表 现 
在 已 经 处 于 调度 进行 中 

2. 再 次 进入 ensureRootIsscheduled 时 (比如 连续 
2 次 setstate, 第 2 次 setstate 同 样 会 触 
发 reconciler 运 作 流程 中 的 调度 阶段 ), 如 果 发 
现 处 于 调度 中 , 则 需要 一 些 节 流 和 防 拌 措施 , 进 
而 保证 调度 性 能 . 


1. 节 流 (判断 条 
件 : sxistingcaLllbackPriority === newCallba 
新 旧 更 新 的 优先 级 相同 , 如 连续 多 次 执 
行 seststate), 则 无 需 注册 新 taskx( 继 续 沿 
用 上 一 个 优先 级 相同 的 task), 直接 退出 调 
用 . 
2. 防 抖 (判断 条 
件 : sxistingcaLllbackPriority !== newCallba 
新 旧 更 新 的 优先 级 不 同 ), 则 取消 旧 task， 
重新 注册 新 taskx. 


总 结 

本 节 主 要 分 析 了 schedquler 包 中 调度 原理 ， 也 就 

是 React 两 大 工作 循环 中 的 任务 调度 循环 . 并 介绍 

了 时 间 切 片 和 可 中 断 泻 染 等 特性 在 任务 调度 循环 中 的 实 
现 ， schedquler 包 是 React 运 行 时 的 心脏 ， 为 了 提升 调 
度 性 能 , 注册 task 之 前 , 在 react-reconciler 包 中 做 
了 节 流 和 防 拌 等 措施 . 


fiber 树 构 造 (基础 准备 ) 


原文 : https:W/github.com/7kms/react- 
川 Ustration-series/blob/main/docs/mainm/ 
fibertree-prepare.md 


title 
fiber 树 构造 (基础 准备 ) 


在 React 运行 时 中 ， fibezr 树 构造 位 


于 react-reconciler 包 . 


在 正式 解读 fiber 树 构造 之 前 , 再 次 回顾 一 下 
reconciler 运作 流程 的 4 个 阶段 : 


和 > 
ER | aoop 
an 2 多 Ten 
1 | 
es | renderRootSync renderRootConcurrent 
| performSyncWorkOnl performConcurentWorkOnRoot 
执行 task 回 调 
命 爸 EC 
输入 
人 EUPiSSO ensureRootlsScheduled 
人 Schaduer 
> 
注册 调度 task wonaoop 
| 务 绸 度 


1. 输入 阶段 : 衔接 react-aom 包 , 承接 fibper 更 新 请 
求 ( 可 以 参考 React 应 用 的 启动 过 程 ). 

2. 注册 调度 任务 : 与 调度 中 心 (scheduler 包 ) 交 互 ， 
注册 调度 任务 task, 等 待 任 务 回调 (可 以 参考 
React 调度 原理 (Schedulem)). 

3. 执行 任务 回调 : 在 内 存 中 构造 出 fiber 树 和 DoM 
对 象 , 也 是 fiber 树 构造 的 重点 内 容 . 


4. 输出 : 与 壮 染 器 (zeact-dqom) 交 互 ， 泻 染 poM 贡 点 . 


fibez 树 构造 处 于 上 述 第 3 个 阶段 , 可 以 通过 不 同 的 
视角 来 理解 fiber 树 构造 在 React 运 行 时 中 所 处 的 位 
置 : 


节 从 scheduler 调 度 中 心 的 角度 来 看 ， 它 是 任务 队 
列 taskoueue 中 的 一 个 具体 的 任务 回调 


(task s callback). 
。 从 React 工作 循环 的 角度 来 看 , 它 属 
于 fibezr 树 构造 循环 . 


由 于 fiber 树 构造 源码 量 比较 大 , 本 系列 根据 React 
运行 的 内 存 状态 , 分 为 2 种 情况 来 说 明 : 


1. 初次 创建 : 在 React 应 用 首次 启动 时 , 界面 还 没 
有 这 染 , 此 时 并 不 会 进入 对 比 过 程 , 相当 于 直接 
构造 一 棵 全 新 的 树 . 

2. 对 比 更 新 : React 应 用 局 动 后 , 界面 已 经 泻 染 . 
如 果 再 次 发 生 更 新 , 创建 新 fiber 之 前 需要 
和 旧 fiber 进 行 对 比 . 最 后 构造 的 fiber 树 有 可 
能 是 全 新 的 , 也 可 能 是 部 分 更 新 的 . 


无 论 是 初次 创建 还 是 对 比 更 新 , 基础 概念 都 是 通用 的 ， 
本 节 将 介绍 这 些 基础 知识 , 为 正式 进入 fiber 树 构造 
做 准备 . 


ReactElement, Fiber, DOM 三 者 的 关 


系 


在 React 应 用 中 的 高 频 对 象 一 文中 , 已 经 介绍 
了 ReactElement 和 Fiber 对 象 的 数据 结构 . 这 里 我 们 


梳理 出 ReactElement， FEIiperyv DOM 这 中 种 对 象 的 关 
系 


1. ReactElement 对 象 (type 定义 在 shared 包 中 ) 


。 所 有 采用 jsx 语 法 书写 的 节点 , 都 会 被 编译 
器 转换 , 最 终 会 
以 React .CeateElement (...) 的 方式 ， 创 
建 出 来 一 个 与 之 对 应 的 ReactElement 对 象 


3. fiber 对 象 (type 类 型 的 定义 在 
ReactlnternalTypes.js 中 ) 


。 fiber 对 象 是 通过 ReactElement 对 象 进行 
创建 的 , 多 个 fiber 对 象 构成 了 一 
棵 fiber 树 ，fiber 树 是 构造 poM 树 的 数据 模 
型 ，fipbezr 树 的 任何 改动 , 最 后 都 体现 


到 poM 树 . 
5. DOM 对 象 : 文档 对 象 模型 


。 DoM 将 文档 解析 为 一 个 由 节点 和 对 象 ( 包 
含 属 性 和 方法 的 对 象 ) 组 成 的 结构 集合 ， 
也 就 是 常 说 的 poM 树 . 

。 vavascript 可 以 访问 和 操作 存储 在 DOM 


中 的 内 容 , 也 就 是 操作 poM 对 象 , 进而 触发 


Ul ; 泻 染 ， 


它们 之 间 的 关系 反映 了 我 们 书写 的 JSX 代码 到 
DOM 万 点 的 转换 过 程 : 


代码 ->DOM 转 换 过 程 
ReactElement 结 构 Fiber 权 结构 


popaduom 全 > | 
ad 
pe-div = 检 1 
<App> 
Popaquamn -一 
chidren 是 一 个 数组 由 
Hyperheader Hyperfooter 1 
Props.child n=“header” 人 nn“footer dl 
下 ch 本 
pmpadaamn ， 隐 国 ee 
type-RaactFragm。 ad bg <Content/> |】 footer 
站 下 
aa oh 由 
children 是 一 个 数组 < 
】 p 
Per ype-“p" bype- 
propschildrene"1 ildre epsch 


。 开发 人 员 能 够 控制 的 是 zsx, 也 就 
是 ReactElement 对 象 . 

。 fiber 树 是 通过 ReactElement 生 成 的 , 如 果 脱 离 
了 ReactElement,fiber 树 也 无 从 谈 起 . 所 以 
是 ReactElement 树 (不 是 严格 的 树 结 构 , 为 了 方 
便 也 称 为 树 ) 驱 动 fiber 树 . 


。 fiber 树 是 poM 树 的 数据 模型 ，fiber 树 驱 
动 DoM 树 


开发 人 员 通 过 编程 只 能 控制 ReactEglement 树 的 结 
构 ，ReactElement 树 驱动 fiber 树 ，fiber 树 再 豫 
动 DoM 树 , 最 后 展现 到 页 面 上 . 所 以 fiber 树 的 构造 过 
程 , 实际 上 就 是 ReactEglement 对 象 到 fiber 对 象 的 转 
换 过 程 . 


全 局 变量 


从 React 工作 循环 的 角度 来 看 , 整个 构造 过 程 被 包 囊 
在 fiber 树 构造 循环 中 (对 应 源码 位 于 
ReactFiberWorkLoop.js). 


在 React 运 行 时 ， ReactEipbperNWorkLooPp . js 闭 包 中 
的 全 局 变量 会 随 着 fibez 树 构造 循环 的 进行 而 变化 , 现 
在 查看 其 中 重要 的 全 局 变量 (源码 链接 ): 


// 当前 React 的 执行 栈 (执行 上 下 文 ) 


et executionContext : 了 XecutionContext = NoCc 


// 当前 *oot 节 点 


1et WorKInProdtressRoot : EliberRocot 站 山中 


// 正在 处 理 中 的 fibezr 节 点 


工 记 


Tet WorKInProdtress: 了 ipbezL nul1l = mulJ]|; 
// 正在 泻 染 的 车 道 (复数 ) 


et WOorKInDProgressRootRenaderLanes: Lanels = N 


// 包含 所 有 子 节 点 的 优先 级 ， 是 workInProgressRootR 
// 大 多 数 情况 下 : 在 工作 循环 整体 层面 会 使 用 workInPros 
et SupbtreeRendqerLanes: Lanes = NoLanes ， 


// 一 个 栈 结 构 : 专门 存储 当前 节点 的 subtreeRenderLa 


Const SubtreeRendqerLanesCursor: StackCursSsor<j 


// fiber 构 造 完 后 ，zoot 节 点 的 状态 : _ completed， ezi 
et WoOrKInPProdgtresSsRootEXx1itStatus : RootEBxitSHt: 
// 重大 错误 

1et WOorKInPProdgtresSsRootEatalLErCOor: mixed = nu- 
// 整个 rendqet 期 间 所 使 用 到 的 所 有 1anes 

1et WorKInProgressRootIncludedLanes: Lamnes = 
// 在 rendqezr 期 间 被 跳 过 (由 于 优先 级 不 够 ) 的 Lanes : 只 包 
et WorkInProgressRootSKkippeadqLanes: Lanes = 


// 在 rendqez 期 间 被 修改 过 的 1anes 


et WOorKkInProgressRootUpdatedqLanes: Lanes = 】 


// 防止 无 限 循环 和 多 套 更 新 

GO 让 Ss 臣 要 N 三 亚 及 也 天 加 尼 有 大 下 下 天 下 MT 三 二 5.0 

Let nestedqUpadatecCcount : numbper = 0); 

let rootWithNestedqUpqates: FipberRoot | null : 
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Jet nesteqPassiveUpadqateCount : number = 0; 


// 发 起 更 新 的 时 间 


Jet_ CurrentEventTime: number = NoTimestamp:， 
1et _ currentEventWipLanes: Lanes = NoLanes， 
et CuUrrentEVentPenadingLanes: Lanes = NOLanes 


在 源码 中 , 大 部 分 变量 都 带 有 英文 注释 (读者 可 自行 
查阅 ), 此 处 只 列举 了 fibezr 树 构造 循环 中 最 核心 的 变 


烛 


执行 上 下 文 


在 全 局 变 > 量 中 有 executioncontext， 代表 泻 染 期 间 
的 执行 栈 (或 叫做 执行 上 下 文 ), 它 也 是 一 个 二 进 制 表示 
的 变量 , 通过 位 运算 进行 操作 (参考 React 算法 之 位 
运算 ). 在 源码 中 一 共 定 义 了 8 种 执行 栈 : 


七 YPe ExecutionCcontext = number， 

eXPort const NoContext = /r* x] UL 
Const BatchedContext = /r* x/ Or 
Const 卫 VentContext = /r* x/ Or 
Const DiscreteEventContext = /* xy (人 
const LegacyUnbatchedqContext = /* 人 
Const RenadqerContext = / x /OIL 


GonmsEiGonmniECSTEEZ 三 于 全 /人 / 0L 


上 文 回 顾 了 reconciler 运作 流程 的 4 个 阶段 , 这 4 

个 阶段 只 是 一 个 整体 划分 . 如 果 有 具体 到 每 一 次 更 新 ， 
是 有 差异 的 . 比如 说 : Legacy 模式 下 的 首次 更 新 , 不 
会 经 过 调度 中 心 (第 2 阶段 ), 而 是 直接 进 

入 fipber 树 构造 (第 3 阶段 ). 


事实 上 正 是 sxecutioncontext 在 操 
控 reconciler 运作 流程 (源码 体现 在 
scheduleUpdateOnFiber 函数 ). 


expDort function schedquleUpdateoOnEiper ( 
fiper: ERiper， 
1ane: Laney 
eVentTITime: number， 
) 
If (Lane === SyncLane) { 
// legacy 或 blocking 模 式 
aa 
(exXecutionContext & LedgdacyUnbatchedCont 
(executionCcontext & (RendercContext C 
) 
eeormeyneNWonneonRecot oo) 胞 
} else { 
// 后 续 的 更 新 
// 进入 第 2 阶段 ， 注 册 调 度 任 务 


enSsSureRootIsScheduledq (root，eventTime) ; 

If (executionContext === NOContexXxt) { 
// 如 果 执 行 上 下 文 为 空 ， 会 取消 调度 任务 ， 手 奴 
// 进入 第 3 阶段 ， 进 行 Eibet 树 构造 
flJushSynccCallbackoueue () ; 


} 


} else { 
// concurtzent 模 式 
// 无 论 是 否 初次 更 新 ， 都 正常 进入 第 2 阶段 ， 注册 调 有 


enSsSureRootIsScheduled (root，eventTime) ; 


在 render 过 程 中 , 每 一 个 阶段 都 会 改 


变 executionCcontext(render 之 前 ， 会 设 


置 executioncontext |= RenderContext; COommit 
之 前 , 会 设 

， ， 3、 几 
置 executioncontext |= commitCcontext), 假设 


在 render 过 程 中 再 次 发 起 更 新 (如 

在 UNsaAFE_componentwillReceiveProps 生 命 周期 中 
调用 setstate) 则 可 通过 executioncontext 来 判断 
当前 的 =*endaer 状 态 . 


双 缓 冲 技术 (double buffering) 


在 全 局 变量 中 有 workIinProgress， 还 有 不 少 

以 workInProgress 来 命名 的 变 

量 . workInProgress 的 应 用 实际 上 就 是 React 的 双 缓 
冲 技术 (aouble buffering). 


在 上 文 我 们 梳理 

了 ReactElement，Fiber，DOM 三 者 的 关系 ，fiber 树 的 
构造 过 程 , 就 是 把 ReactElement 转 换 成 fiber 树 的 过 
程 . 在 这 个 过 程 中 , 内 存 里 会 同时 存在 2 棵 fiber 树 : 


其 一 : 代表 当前 界面 的 fiber 树 (已 经 被 展示 出 
来 , 挂 载 到 fiberRoot .current 上 ). 如 果 是 初次 
构造 (初始 化 泻 染 ), 页 面 还 没有 泻 染 , 此 时 界面 对 
应 的 fiber 树 为 空 

(fibperRoot .current = nul1). 

其 二 : 正在 构造 的 fiber 树 (即将 展示 出 来 , 挂 载 
到 HostRootFiber.alternate 上 , 正在 构造 的 节 
点 称 为 workInProgress). 当 构造 完成 之 后 , 重 
新 泻 染 页 面 , 最 后 切 

换 fiberRoot .current = workInProgress, 使 
得 fiberRoot .current 重 新 指向 代表 当前 界面 
的 fibezr 树 . 


此 处 涉及 到 2 个 全 局 对 象 fiberRoot 


和 HostRootEFiber, 在 React 应 用 的 局 动 过 程 中 有 详 
细 的 说 明 . 


用 图 来 表述 aouble buffering 的 概念 如 下 : 


疏 构造 过 程 中 ， fibperRocot . current 指 回 当前 界 


面 对 应 的 fiber 树 . 


Fer 酝 构 和 过 程 1 构造 过 行 中 
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1 . 构造 完成 并 泻 染 ， 切换 fiberRoot current 指 
针 , 使 其 继续 指向 当前 界面 对 应 的 fiber 树 ( 原 
来 代表 界面 的 fiber 树 , 变 成 了 内 存 中 ). 
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在 全 局 变量 中 有 不 少 变 量 都 以 Lanes 命名 
(如 workInP FogresSsSRootRenaderLanes;sSubtreeRenaqerLanes 


其 作用 见 上 文 注 释 ), 它们 都 与 优先 级 相关 . 


在 前 文 React 中 的 优先 级 管理 中 , 我 们 介绍 了 React 
中 有 3 套 优 先 级 体系 , 并 了 解 了 它们 之 间 的 关联 . 现 
在 fiber 树 构造 过 程 中 , 将 要 深入 分 析 车 道 模型 rane 

的 具体 应 用 . 


在 整个 react-reconciler 包 中 ， Lane 的 应 用 可 以 分 
为 3 个 方面 : 


update 优 先 级 (update.lane) {#update-lane} 


在 React 应 用 中 的 高 频 对 象 一 文中 , 介绍 过 upaate 对 
象 , 它 是 一 个 环形 链表 . 对 于 单个 ee 

讲 ， update.lane 代 表 它 的 优先 级 ， 称 之 为 update 优 
先 级 . 


观察 其 构造 池 数 (源码 迹 接 ), 其 优 务 级 是 由 外 界 传 入 . 


exXxpPort function createUpdate (eventTime : 
GomstaupaaEee UPQaEsE< 一 > 三 三 要 { 
eVentTITimey 
aneyv 
tadg9q: UpadateStateyv 
ageaqanmilale 
@aiNoaceke LIF 
亲人 文臣 3 阐 届 由 | 
} 1; 


zeturn update，; 


在 React 体 系 中 , 有 2 种 情况 会 创建 upaate 对 象 : 


1. 应 用 初始 化 : 在 react-reconciler 包 中 
的 updqatecontainer 辑 数 中 (源码 ) 


exXxpDort function updqateContainer ( 


numls 


element : ReactNodqeList， 
container: OpadueRocot， 
ParentComponent : ?ReactSCcomponent<anyyv 
EUSEGIR RUOIGLEROOE 

isnmne | 
Const current = Container .current 
Const eventTinme = fedquestEVentTime () ; 
Const Lane = LedquestUpdateLane (current ) 
const _ update = createUpdate (eventTimey 
update.payload = { element 】}; 
endcdueueUpadate (current，，update) ; 
ScheduleUpdateoOnE ipber (CUrrenty，，1Laney ex 


Ceturn ane， 


2. 发 起 组 件 更 新 : 假设 在 class 组 件 中 调 
用 setstate( 湖 码 ) 


const ClassComponentUpdater = 1{ 
1ISMounted， 


endqueueSetState (inst，，payloadq，，callpack) { 


Const fibper = getInstance (1Inst) ，; 

Const eventTime = FredquestEventTime (); // 
Const lane = FedquestUpdateLane (fiber) /， 
const update = CreateUpdate (eventTITime 1: 


Update.payload = PaylLoad; 


endqueueUpdate (fiper，update) ; 
ScheduleUpadateoOnE ipber (fiber，1Laney event 1 
}， 
} 1; 


可 以 看 到 , 无 论 是 应 用 初始 化 或 者 发 起 组 件 更 新 , 创 | 
建 update.lane 的 逻辑 都 是 一 样 的 , 都 是 根据 当前 时 
间 , 创建 一 个 update 优先 级 . 


requestUpdateLane: 


exXpDPort function FredquestUpdateLane (fiper: 了 It 
// Special cases 
const mode = fiper.modqde，; 
If ((moae & BlLockingModqe) === NOMode) ({ 
// legacy 模式 


return (SyncLane: Lane) ; 


}) else if ((mode & ConcurrentMoadqe) === NOM 
// blocking 模 式 
zeturn getCurLrentPrior1ityLeVe1lL() == 二 Immk 


? (SyncLane: Lane) 
(SyncBatchedLane: Lane) ; 
} 
// concurrent 模 式 


If (CurrentEvVentWipPLanes === NOoLanes) ({ 


CUTLTentEVentWipPLanes = WOLTKIDPEOGgresSsSsRoot 
} 
Const 1sTransition = iedquestCurzentIrzeansit: 
EM 呈 ENEaESNN EL 

// 特殊 情况 ， 处 于 suspense 过 程 中 

IE (CurrentEVvVentPenadingLanes !== NoLanes ) 

CUTLTentEVentPendingLanes = 
mostRecent1LyUpadatedqRoot !== DmnulL 
2? mostRecent1LyUpdqatedqRoot .pendqindTL: 
NoLanes ， 

} 

zeturn findqTransitionLane (CUrCLEentEVentWiTk 
} 
// 正常 情况 ， 获取 调度 优先 级 
Const SchedulerPriority = 9etCurtrentPriIorIt 
et ane，; 
人 

(executionContext & DisctreteEVentContexXt ) 

SchedulerPriority === UserBlockingSchedu- 
刀 计 

// executionCcontext 人 在 输入 事件 . 且 调 度 优先 


Lane = findqUpdqateLane (InputDiscreteLanePi 
} else { 

// 调度 优先 级 转换 为 车 道 模型 

Const SchedulerLanePriority = SchedulerPai 


SchedulerPriorityv 
) ; 


Lane = findqaUpdqateLane (SchedulerLanePLr1iIor: 


} 


Ceturn ane， 


可 以 看 到 *equestUpdqateLane 的 作用 是 返回 一 个 合 
适 的 update 优先 级 . 


下 legacy 模式 : ; 返回 syncLane 
2. blocking 模式 : 返回 syncLane 
3. concurrent 模式 : 


。 正常 情况 下 , 根据 当前 的 调度 优先 级 来 生成 
一 个 lane. 
。 特殊 情况 下 (处 于 人 过 程 中 ), 会 优 
2 道中 的 空 亲 通 
道 (如 果 所 有 TransitionLanes 通 道 都 被 占 
用 , 就 取 最 高 优先 级 . 源码 ). 


最 后 通 
过 schedquleUpdqateonEiber (current， aney evVentTime) ; 


效 ， 把 upaate lane 正 式 市 入 到 了 输入 阶段 . 


ScheduleUpdateoOnE iber 是 输入 内 段 的 必 经 卫 数 ， 在 


本 系列 的 文章 中 已 经 多 次 提 到 ， 此 处 以 upaate .amne 


的 视角 分 析 : 


expDort function schedquleUpdateoOnEiper (人 
EeeioSe 
Lane: Laneyv 
eventTITime: number， 
) 
If (Lane === SyncLane) { 
// legacy 或 plocking 模 式 
人 二 
(executionContext & LedgdacyUnbatchedCont 
(executionCcContext & (RendqerContext C' 
JE 
EeeEormsynmecWoseOnRcoiooet 克 
} else { 
enSureRootIsScheduledq (root，eventTime) ; 
If (executionContext === NOContexXxt) { 


flushSsyncCallbackoueue (); // 取消 sche 


} 


} else { 
// concurrent 模 式 
enSureRootIsScheduledq (root，eventTime) ; 


当 lane === SyncLane 也 就 是 legacy 或 blocking 模 
式 中 , 注册 完 回 调任 务 之 后 
(ensureRootIsSchedquled (root，eventTime) ), 如 
果 执 行 上 下 文 为 空 , 会 取消 schedule 调度 , 主动 刷 


新 回调 队列 flushsynccallbackoueue () 


这 里 包含 了 一 个 热点 问题 


(setstate 到 底 是 同步 还 是 异步 ) 的 标准 答案 : 


。 如 果 逻 辑 进 入 flushsyncCallbackoueue 
(executioncontext === Nocontext), 则 会 主 
动 取 消 调度 , 并 刷新 回调 , 立即 进入 fiber 树 构 
造 过 程 . 当 执行 seststate 下 一 行 代码 
时 ，fiber 树 已 经 重新 泻 染 了 , 故 sststate 体 现 
为 同步 . 

。 正常 情况 下 , 不 会 取消 schedule 调 度 . 由 
于 schedule 调 度 是 通过 Messagechanne1 触 发 ( 安 


任务 ), 故 体现 为 异步 . 


泻 染 优先 级 (renderLanes) 


这 是 一 个 全 局 概念 , 每 一 次 render 之 前 , 首先 要 确定 
本 次 render 的 优先 级 . 具体 对 应 到 源码 如 下 : 


// .. .省 略 无 关 代 码 
攻 机 GT 站 重 已 ErmSyneNerkonReecoci 
et anes，; 
et exitStatus， 
// 获取 本 次 `*endqe 的 优先 级 
anes = 9etNextLanes (oot，1Lanes) ; 
exXlitStatus = TrendqerRootSync (oot，1Lanes) ; 
】 
// .. .省 略 无 关 代 码 
function PerformCconcurrentWorkOnRoot (root) { 


// 获取 本 次 `z*endqer 的 优先 级 


Let Lanes = getNextLanes ( 

Se 

xzoot === WOLTKInProdgreSsSSsRoot ? worKIDPodil 
) ;7 
If (Lanes === NOoLanes) { 


到 全 蕊 而 工 站 必 而 页 下 二 


} 


et exitStatus = rendqerRootConcurtent (xzoot ， 


可 以 看 到 , 无 论 是 egacy 还 是 concurrent 模 式 , 在 正 
式 *ender 之 前 , 都 会 调用 getNextLanes 获 取 一 个 优 
先 级 (源码 链接 ). 


// .. .省 略 部 分 代码 
eXpPort function getNextLanes (oot : FEiperRocot， 
// 1. check 是否 有 等 待 中 的 1anes 


const PendingLanes = Foot.PpendingLanels ; 
If (pendqingLanes === NOoOLanes) { 
zeturn_ highestLanePriority = NoLanePLrIoL: 


Cetuzrn NoLanes，; 


et nextLanes = NoLanes ， 
Tet mnextLanePzriority = NoLanePLr1iorItY|; 
Const expiredqLanes = toot .expiredqLanels:， 
Const SuspendedLanes = oot .SuspenaqedqLanes ; 
const PindedqLanes = toot .pingedqLanes，; 
// 2. check 是 否 有 已 过 期 的 Lanes 
If (expiredqLanes !== NoLanes) { 
nextLanes = expiredqLanes:， 
nextLanePriority = Letutrn highestLanePLII 
} else { 
const nonIdqlePendingLanes = PendqingLanes 
if (nonIdlePendqingLanes !== NoLanes) ({ 
人 
} else { 


// Idqle 任 务 


】 
If (nextLanes === NoLanes) { 


Cetutrn NoLanes，; 


Cetutcn PnextLanes，; 


qetNextLanes 会 根据 fiberRoot 对 象 上 的 属性 
(expireqdLanes， SuspendedLanes， bingedLanes 等 )， 


确定 出 当 前 最 紧急 的 lanes. 


此 处 返回 的 Ianes 会 作为 全 局 泻 染 的 优先 级 , 用 

于 fibez 树 构造 过 程 中 . 针对 fiber 对 象 或 update 对 象 ， 
只 要 它们 的 优先 级 

(如 : fiber.lanes 和 和 update.lane) 比 泻 染 优先 级 低 ， 
都 将 会 被 忽略 . 


fiber 优 先 级 (fiber.lanes) 


在 React 应 用 中 的 高 频 对 象 一 文中 , 介绍 过 fiber 对 
象 的 数据 结构 . 其 中 有 2 ES 


1. fiber.lanes: 代表 本 节点 的 优先 级 

2. fiber.childLanes: 代表 子 节点 的 优先 级 
从 FipberNode 的 构造 水 数 中 可 以 看 
出 ，fiber.lanes 和 fiber.childLanes 的 初始 
值 都 为 NoLanes, 在 fiber 树 构造 过 程 中 , 使 用 全 
局 的 泻 染 优先 级 (rendaerLanes) 和 fiber.lanes 


判断 fiber 节 点 是 否 更 新 (源码 地 址 ). 


。 如 果 全 局 的 演 染 优先 级 renderLanes 不 包 
括 fiber.lanes, 证 明 该 fiber 节 点 没有 更 
新 , 可 以 复 用 . 

。 如 果 不 能 复 用 , 进入 创建 阶段 . 


ECESIGT SONG TS 
ESTORE 
WOLTKInProdgtress: REipbper， 
zendqerLanes: Lanesyv 

)j 下 :RaOe 同居 汪 { 


const updateLanes = WOFKIDProgress .anes， 


if (Current 1!== mul1L) { 


Gaomse 旺 eiceEEAsOios 


Const mewProPps 
王 汪 
GeisseieS 本 WESTSGleS | 


hasLegacyContextCchangeda () | 


CuUrtent .memoizedqProps; 


WOLTKIDnPEogtress .PendqingPai 


// Force a re-rendqer if the imp1Lementat 


(DEV_ ? WorkInPProdgress .本 ypPe !== CULI1 


妨 


QidReceliveUpdate = 七 TUe， 


} else if (1!1includqesSomeLane (fenaQqerLanes， 


QidReceliveUpdate = false'， 


// 本 `fiber 节点 的 没有 更 新 ， 可 以 复 用 ， 


zetutrn bailoutoOonAlLreadyEinishedqWork (cui 


} 
// 不 能 复 用 ， 创 建新 的 Eiber 贡 点 
workInProgtess.lanes = NoLanes; // 重 置 优先 乡 
SWEEehawoenRFOogessEao9h) | 
Case ClassComPponent : { 
Const Component = WOTKIDProgress .ype; 
const unresolvedPzrops = WOFTKIDPEodgress. 
Const resolvedqProps := 
WOLTKInProdgtress.elementIype === Compor 
? _ unresolvedProps 


zesolVeDefaulLtPzops (Component，UI 


zetutrn updateClassComponent ( 
CULTILent， 
WOLTKIDPProdgressy 
ComPonent， 
zeSolvedqPropPpsy 
// 正常 情况 下 泻 染 优先 级 会 被 用 于 fibezr 树 的 构 


CenadqerLanesy 


栈 帧 管理 
在 React 源 码 中, 每 一 次 执行 tiber 树 构造 (也 就 是 调 


用 performsvyncWorkonRoot 或 

者 bsrformconcurrentWorkonRoot 浊 数 ) 的 过 程 ， 都 
需要 一 些 全 局 变量 来 保存 状态 . 在 上 文中 已 经 介绍 最 
核心 的 全 局 变量 . 


如 果 从 单个 变量 来 看 , 它们 就 是 一 个 个 的 全 局 变量 
如 果 将 这 些 全 局 变量 组 合 起 来 , 它们 代表 了 当 

前 fiber 树 构造 的 活动 记录 . 通过 这 一 组 全 局 变量 , 可 
以 还 原 #ibez 树 构造 过 程 (比如 时 间 切 片 的 实现 过 程 
(参考 React 调度 原理 )，fiber 树 构造 过 程 被 打 断 之 
后 需要 还 原 进度 , 全 靠 这 一 组 全 局 变量 ), 所 以 每 

次 fiber 树 构造 是 一 个 独立 的 过 程 , 需要 独立 的 一 组 全 
司 变量 , 在 xeacc 内 部 把 这 一 个 独立 的 过 程 封 装 为 一 
个 栈 帧 stackx( 简 单 来 说 就 是 每 次 构造 都 需要 独立 的 
空间 . 对 于 本 由 的 深入 理解, 请 读者 自行 参考 其 他 次 
料 ) 


所 以 在 进行 Etiber 树 构造 之 前 , 如 果 不 需 要 恢复 上 一 
次 构造 进度 , 都 会 刷新 栈 帧 (源码 在 
prepareFreshStack 函数 ) 


UnietconEFenmeeesRooecCenecuiseenmtieseect 天 本 RnheoEerRoot 
Const PrevZEXecutionContext = exXecutionConts 
ExeeCueonEonmeexsk 医 Renaereonmeexe， 

Const PrevDispatcher = PushDispatcher() ; 
// 如 果 fiberRoot 变 动 ， 或 者 updqate.1ane 变 动 ， 都 : 
If (worKkKInProdtesSsRoot !== LOcot 几 WOLKInP1 
resetRendqerTime () ; 
// 刷新 栈 帧 
PrepPareFreshsStack (oot，1Lanes) ; 


S 七 atNWorKOnPenadingInteractions (oot， 1Lan 


/xx 

刷新 栈 帧 : 重 置 FibezrRooct 上 的 全 局 属性 和 “`fEiber 树 检 

宫 炎 

function PrepareEreshStack (oot : ERiperRoot， - 
// 重 置 FiberRoot 对 象 上 的 属性 


加 ESITEGWGiE 三 本 说 WU 


root .finishedqLanes = NoLanes:; 
const 七 imeoutHanadle = toot .timeoutHanadqle， 
If (timeoutHandle !== noTimeout) { 

xzoot . 廿 ImeoutHandqle = noTimeout， 


cancelTimeout ( 臣 imeoutHandqle) ; 
} 
IT (workInProdgress !== nulL1L) { 
Tet intercrzruptedqWork = WOTKIDPEogress .zeti 


while (interruptedqNWork !== nul1L) 1{ 


unwinadInterruptedqWork (InterruptedqNWork ) ; 


InteLcrLruptedqWNWork = interzruptedqWorKk .etuai 


} 
// 重 置 全 局 变量 


WOTKIDPFrOogressRoot = zooft，; 

WOLTKIDPProdgress = CreateWorkInProgress (ooet， 
WOLTKIDPFogressRootRenderLanes = SuUptreeRenc 
WOLTKInPErodtesSRootEX1itStatus = RootIncomp1]s 
WOFKIDPFrOGgresSsRootEatalLErrOF = mul1，; 
WOrKkInProdgdressRootSkippedqLanes = NoOLanes，; 
WOLrKInProdgressRootUpadatedqLanes = NOoOLanes，; 
WOLTrKInProdtressRootPingoedLanes = NoLanes ; 


注意 其 中 

的 createworkInProgress (root .current， nulI) ， 
其 参数 root .current 即 HostRootEiber, 作用 是 

给 HostRootFiber 创 建 一 个 alternate 盎 

本 .workInProgress 指 针 指 向 这 个 副本 

( 即 workInProgress = HostRootEiber.alternate)， 
在 上 文 aouble buffering 中 分 析 


过 ，HostRootFiber.alternate 是 正在 构造 的 fiber 树 


的 根 万 点 . 


总 结 

本 有 是 fiber 树 构造 的 准备 篇 , 首先 在 安 观 上 从 不 同 
的 视角 (任务 调度 循环 ，fiber 树 构造 循环 ) 介 绍 

了 fibez 树 构造 在 React 体 系 中 所 处 的 位 置 , 然后 深 
入 react-reconciler 包 分 析 fiber 树 构造 过 程 中 需要 
使 用 到 的 全 局 变量 , 并 解读 了 双 缓 冲 技术 

和 优先 级 (车 道 模型 ) 的 使 用 , 最 后 解释 栈 帧 管理 的 实现 
细节 . 有 了 这 些 基础 知识 ，fipbez 树 构造 的 具体 实现 过 
程 会 更 加 简单 清晰 . 


fiber 树 构造 ( 切 次 创建 ) 


原文 : https:W/github.com/7kms/react- 
川 ustration-series/blob/main/docs/mainm/ 
fibertree-create.md 


title 
fiber 树 构 造 (初次 创建 ) 


本 节 的 内 容 完全 建立 在 前 文 fiber 树 构 造 (基础 准备 ) 
中 介绍 的 基础 知识 之 上 , 其 中 总 结 了 fiber 树 构造 的 
2 种 情况 : 


1. 初次 创建 : 在 React 应 用 首次 启动 时 , 界面 还 没 
有 这 染 , 此 时 并 不 会 进入 对 比 过 程 , 相当 于 直接 
构造 一 棵 全 新 的 树 . 

2. 对 比 更 新 : React 应 用 局 动 后 , 界面 已 经 泻 染 . 
如 果 再 次 发 生 更 新 , 创建 新 fiber 之 前 需要 
和 旧 fiber 进 行 对 比 . 最 后 构造 的 fiber 树 有 可 
能 是 全 新 的 , 也 可 能 是 部 分 更 新 的 . 


本 节 只 讨论 初次 创建 这 种 情况 , 为 了 控制 篇 幅 (本 忆 直 


击 核心 源码 , 不 再 介绍 基础 知识 , 可 参照 fiber 树 构 造 
(基础 准备 )) 并 突出 fiber 树 构造 过 程 , 后 文 会 

在 Legacy 模 陈 下 进行 分 析 ( 因 为 只 讨论 fiber 树 构造 原 
理 ， concurrent 模 式 与 Legacy 没 有 区 别 ). 


本 节 示 例 代 码 如 下 (codesandbox 地 址 ): 


Class APP extendqs React .Component { 
CompPponentDidqMount () 1 
GemsaGiieaeoi 人 全 人 记忆 是 MeDni 由 了 
console.1og( App 组 件 对 应 的 Eiber 节 点 : 、， 
} 
zenaer () 1{ 
Ceturn (人 
<qlivV ClLassName="apPp"> 
<headqer>headqer</headqeLr> 
<Content /> 
<QER 
) 7 


Class Content extenaqs React .Component 1{ 
ComponentDiadqMount () 1{ 


Gonmsolesliog( Ceneesn Meuni  ) 二 


console.1Llog(content 组 件 对 应 的 fibezr 节 点 : 


七 


】 
zenaer () 1{ 
Ceturn (人 
<React .FTragment> 
KE 过 |E 笛 > 
RE 之 2 和 > 
</React .Fagment> 


) ;7 


) 
export aQefault APpP， 


局 动 阶段 


在 前 文 React 应 用 的 局 动 过 程 中 分 析 了 3 种 启动 模 
式 的 差异 ， 企 进 入 react- reconciler 包 之 前 ( 调 
用 updaatecontainer 之 前 )， 内 存 状 态 图 如 下 : 


legacy 


AAA 一 containerinfo 


根据 这 个 结构 , 可 以 在 控制 台中 打出 当前 页 面 对 应 


的 fiber 树 (用 于 观察 其 结构 ): 


Qocument . 9etElLementById('"root ') .reactRootCor 


然后 进 井 入 react- zeconcileL 包 调 用 


UpdateContainer 图 数 : 


// .. .省略 了 部 分 代码 
expDport function updateContainer ( 
element : ReactNodqeList， 
container: OpadueRocot， 
ParentComponent : ?ReactSComponent<any any> 


EURNOEIR DIGG 


) : Lane { 
// 获取 当前 时 间 惟 
Gonse eassnie 三 eol EDITISS 人 cssSiE7 
Const evVentTime = 三 ee 
// 1. 创建 一 个 优先 级 变量 (车 道 模型 ) 
Const Lane = RE 


// 2. 根据 车 道 优先 级 ， 创 建 update 对 象 ， 并 加 入 fib 
Const update = CreateUpdate (eventTITime，，1Lan 
Update.payload = { element 】}; 

Callback = callpack === Unadqefinedq ? nul1l 


If _ (callback !== nulL1L) 1{ 
Upbagaeeeseanuoacls eailoaels， 
} 


endcdueueUpadate (Curtent，，update) ; 


// 3. 进入 reconciler 运 作 流程 中 的 ` 输入 ` 环节 
ScheduleUpdateoOnE ipber (CuUrrent，，1Laney event” 


Ceturn ane， 


由 于 update 对 象 的 创建 , 此 时 的 内 存 结构 如 下 : 


注意 : 最 初 的 ReactElement 对 象 <Aapp/> 被 挂 载 
到 HostRootEipber.updateoueue.shared.pendqing.payload 


中 , 后 文 Eiber 树 构造 过 程 中 会 再 次 变动 . 


构造 阶段 


为 了 突出 构造 过 程 ,排除 干扰 , 先 把 内 存 状态 图 中 
的 FiberRoot 和 HostRootFibezr 单 独 提出 来 (后 文 在 


此 基础 上 添加 ): 


WorkLoop 内 存 状态 


workinPorgressRoot = null 
workinProgress = null 


HostRootFiber 


在 scheduleUpdateOnFiber 函数 中 : 


// .. .省 略 部 分 代码 
expDort function schedquleUpdateoOnEiper (人 
fiper: ERipery， 
ane: Laney 
eVentTITime: number， 
用 
// 标记 优先 级 
Const root = markUpdateLaneEFromEiperToRoceot 
If (Lane === SyncLane) { 
EL 信 
(exXecutionContext & Ledg9acyUnbatchedCont 


(executionCcContext & (RendqerContext C' 


/| 
// 首次 泻 染 ， 直接 进行 fiber 构造 、 
emRormsynecWonrkOnReoo 总 (和 ce 吕 二 


} 
人 


可 以 看 到 , 在 Legacy 模 式 下 且 首 次 泻 染 时 , 有 2 个 子 
数 markUpdateLaneFromFiberToRoot 和 
performSyncWorkOnRoot. 


其 

中 markUpdqateLaneFromEiberToRoot (fiber，1lane) 时 
数 在 fiber 树 构造 (对比 更 新 ) 中 才 会 发 挥 作用 , 因为 

在 初次 创建 时 并 没有 与 当前 页 面 所 对 应 的 fiber 树 , 所 
以 核心 代码 并 没有 执行 , 最 后 直接 返 回 了 FiberRoot 


对 象 . 


performSsyncWorkonRoot 看 起 来 源码 很 
多 ， 初 次 创建 中 真正 用 到 的 就 2 个 数 : 


EeeEEeormsynmeWeorkoOnRcoot eccti 央 | 


et anes，; 


et exitStatus ， 
人 人 ( 
xzoot === WOLTKIDnProgreSSRoot SR& 
includqesSomeLane (foot .exXpPiredqLanesr WwWOrK: 
1 
// 初次 构造 时 (因为 root=fiberRoot，workInPrc 
} else { 
// 1. 获取 本 次 rendez 的 优先 级 ， 初 次 构造 返回 No 
Lanes = 9etNextLanes (oot，NoLanes) ; 
// 2. 从 rzoot 节 点 开始 ， 至 上 而 下 更 新 


exXitStatus = TrendqerRootSync (oot，1Lanes ) ; 


// 将 最 新 的 fiber 树 挂 载 到 root .finisheqwozk 节 点 


Const finisheaqWorKk: Fiber = (oot .Current .: 
root .finishedqNork = finishedqNork， 
root .finishedqLanes = Lanes; 


// 进入 commit 扮 段 


CommueReocitseccita 电 


// .. .后 面 的 内 容 本 节 不 讨论 


其 中 agetNextLanes 返 回 本 次 render 的 泻 染 优先 级 
( 详 见 fiber 树 构 造 (基础 准备 ) 中 优先 级 相 天 小节) 


renderRootSync 


function renderRootSync (root : 了 ipbperRoot，， Lant 
Const PrevZEXecutionContexXt = exXecutionConts 
Escemieenesinies=ee 攻 RenaeeeenmEex 避 ， 
// 如 果 fiberRoot 变 动 ， 或 者 updqate.1ane 变 动 ， 都 : 
If (worKInProdgtrtesSsRoot !== LOcot 川 WOLKInP1 
// 刷新 栈 帧 ， legacy 模 式 下 都 会 进入 
PrepPareFreshsStack (oot， Lanes) ; 
】 
als| 
ES 
wonmaEoeocesSwnmen 全 交 
Dreak'， 
} catch (thrownVvalLue) { 
analeEEoeCSO ECONWVaUeE 
} 
} while (true) ; 
exXecutionContext = PreVExXxecutionContext ， 
// 重 置 全 局 变量 ， 表明 *endez 结 
WOLrKIDPProdgressRocot = nul1l，; 
WOLTKIDnProdgressRootRenaderLanes = NoLanes， 


etuznmn wozkInPFECOdreSSROOtEXLtStatus， 


在 renderRootsync 中 , 在 执行 Eiber 树 构造 前 
(workLoopSync) 会 先 刷 新 栈 帧 prepareEreshStack 
(参考 fiber 树 构 造 ( 基 础 准备 )). 在 这 里 创建 

了 HostRootEiber.alternate, 重 置 全 局 变 


旦 和 任 
量 workInProgress 和 workIinProgressRoot 等 . 


WorkLoop 内 存 状 态 


worklnProgressRootRenderLanes = RNoLanes 
subtreeRenderLanes = NoLanes 


workinPorgressRoct 全 一 人 


ER 


AT j 
A 1 
7 
AT A/ 
workinProgress alternaie 
【HostRootFiber HostRootFiber 
过 


循环 构造 


逻辑 来 到 workLoopsync, 虽然 本 节 在 Legacy 模 式 下 
进行 讨论 , 此 处 还 是 对 比 一 下 workLoopconcurrent 


EeeoOnEwNworkmooecSynmec (人 司 
while (workInProdgress !== nul1lL) { 


PerformUnitoOofWork (workInProdgress) ; 


EDTOTeIESei0 DeeeieGeiaieiihsssa 0 二 | 
// Perform work until Schedule asks us 七 o 
while (workInPProgress !== null && !shou1dY: 


PerformUnitoOofWork (worKkInProdgress) ; 


可 以 看 到 workLoopconcurrent 相 比 于 svnc, 会 多 一 
个 停顿 机 制 , 这 个 机 制 实现 了 时 间 切 片 和 可 中 断 泻 染 
(参考 React 调度 原理 ) 


结合 psrformUnitOofwork 国 娄 数 (源码 地 址 ) 


// ... 省 略 部 分 无 关 代 码 

EUnmetonEETEoOrmUna ENWoSUUTLEOAWNWOTE ER 1IPer) 
// unitOofWwork 就 是 被 传 入 的 workInProgress 
const current = unitOofWork .alternate，; 


et mext 


next = begqinWorKk (Curenty，，unitofWorKk，， Subta 
unitoftWork .memoizedqProps = unitofWork.Pend: 
:If (next === mul1) { 


// 如 果 没 有 派生 出 新 的 节点 ， 则 进入 comp1leteWork 
CompleteUnitofWork (unitOofWork) ; 


} else { 


WOFKIDProgress = mext， 


可 以 明显 的 看 出 , 整个 fiber 树 构造 是 一 个 深度 优先 
遍历 (可 参考 React 算法 之 深度 优先 遍历 ), 其 中 有 2 
个 重要 的 变量 workTInProgres s 和 和 current( 可 参考 前 


文 fiber 树 构造 (基础 准备 ) 中 介绍 的 双 缓 冲 技术 ): 


。 workInProgress 和 current 都 钢 为 指针 
有 workInProgress 指 加 当 前 正在 构造 的 fiber 贡 


三 开 兰 人 站 蕊 .三 workInProgress.alternate( 即 fiber.alt 
指向 当前 页 面 正在 使 用 的 fibezr 节 点. 初次 构造 
时 ， 页 面 还 未 演 染 ， 此 时 current = mul1l. 


在 深度 优先 遍历 中 , 每 个 fibezr 节 点 都 会 经 历 2 个 阶 


段 : 


1. 探寻 阶段 bedginWork 


2. 回 漳 [ 介 自 ComPJeteWoLrkK 


这 2 个 阶段 共同 完成 了 每 一 个 fiber 节 点 的 创建 , 所 
有 fiber 节 点 则 构成 了 fiber 树 . 


探寻 阶段 beginWork 


bedginWork (CuUrtent，，unitofWork，，，subtreeRendqerLanes ) 


码 地 址 ) 针 对 所 有 的 Fiber 类 型 , 其 中 的 每 一 个 case 
处 理 一 种 Fiber 类 型 . updqatexxXxX 另 数 
(如 : UpdateHostRoct，updatecCclassCcomponent 等 ) 


的 主要 逻辑 : 


1. 由 ReactElement 对 象 创 建 所 有 的 fiper 节 
点 , 最 终 构造 出 fiper 树 形 结构 (设置 return 
We 

2. ee 用 来 标 
记 fibezr 节 点 的 增 , 删 , 改 状 态 , 等 
待 completework 阶 段 处理 ) 


一 


3. 设置 fiber.stateNode 局 部 状态 (如 class 类 型 


点 : fiber.stateNode=new class1()) 


function beginWNWork ( 
CORE RISE 
WOLTKInProdtress: Eibperyv 
zendqerLanes: Lanesy， 
证 Sosis TO 司 罗 | 国王 
const updateLanes = WOTKIDProdgress .anes， 
If (Current 1!== mul1L) { 
// _ update 逻辑 ， 首 次 endez 不 会 进入 


} else { 
qidqReceliveUpdate = false，; 
} 
// 1. 设置 workInProgress 优 先 级 为 NoLanes (最 高 似 
WOrKIDPFrogress. lanes = NoOLanes， 
// 2. 根据 workInProgress 节 点 的 类 型 ， 用 不 同 的 方 ; 
SwWasechaegt 
workInProgress.tag // 只 保留 了 本 例 使 用 到 的 ca 
) 
case ClassCompPponent : { 
Const Component = WOrKIDPProgress .ype，; 
Const unresolvedqProps = WOrKIDProgress 
Const resolvedqProps := 
WOLTKInProdgress .elementIype === Compor 
? _ unresolvedProps 
zeSolLlVeDefaultPzrops (CompPonent ， UIi 
zetutrn updateClassComponent ( 
Chen 
woOLrKIDPProdressy 
CompPonenty， 
zeSolVedqPropPs， 
zenadqerLanesy 
) 7 
} 
GaseosteReot: 
zetutrn updateHostRocot (CUrLent，， worKInPa1 
case HostComPponent : 


zetutrn updateHostCcomponent (CuUrtenty，， woail 


Case HostTITexXt : 
zetutrn updqateHostText (CUFLent，， worKInPa1 
case Fragment : 


zetutrn updateFragment (CUFTent，， worKInPa1 


updateXXX 师 数 (如 : updateHostRoot， 
updateClassComponent 等 ) 虽 然 case 较 多 , 但 是 主 


要 远 辑 可 以 概括 为 3 个 步骤 : 


1. 根 
据 fiber.pendqingProps，fiber.updateoueue 等 输入 数 
状态 , 计算 fiber.memoizedqstate 作 为 输出 状态 

2. 获取 下 级 ReactElement 对 象 


1. class 类 型 的 fiber 节点 


构建 React .component 实 例 
。 把 新 实例 挂 载 到 fiber.stateNode 上 
执行 rendaer 之 前 的 生命 周期 函数 
执行 rendaez 方 法 , 获取 下 
级 reactElement 

。 根据 实际 情况 , 设置 fiber.flags 
7. function 类 型 的 fiber 节点 


。 执行 function, 获取 下 
级 reactElement 
。 根据 实际 情况 , 设置 fiber.flags 
10. HostComponent 类 型 
(如 : aiv，span，button 等 ) 的 fiber 节 


VAAA 


。 PendqingProps . childqren 作 为 下 
级 reactElement 
。 如果 下 级 六 点 是 文本 万 氮 , 则 设置 下 
级 节点 为 null. 准备 进 
入 completeUnitofwork[ 从 段 
。 根据 实际 情况 , 设置 fiber.flags 
14. 其 他 类 型 … 
. 根据 ReactElement 对 象 ， 调 
用 reconcilechildren 生 成 Fiber 子 万 点 (只 生 
成 次 级 子 节点 ) 


。 根据 实际 情况 , 设置 fiber.flags 


不 同 的 updatexxx 国 数 处 理 的 fiber 节 点 类 型 不 同 ， 
总 的 目的 是 为 了 向 下 生成 子 世 点 . 在 这 个 过 程 中 把 一 
些 需要 持久 化 的 数据 挂 载 到 fiber 节 点 上 


(如 fiber .StLateNodqe,fibpeL .memoizedState 等 ); 


把 fiber 节 点 的 特殊 操作 设置 到 fiber.flags 
(如 :节点 ref,class 组 件 的 生命 周期 ,function 组 件 的 hnook, 节 点 删 


等 


寺 ). 


这 里 列 


出 updaateHostRoot， updateHostCcomponent 的 代码 ， 


对 于 其 他 常用 case 的 分 析 ( 如 class 类 
型 ，function 类 型 ), 在 状态 组 件 章节 中 进行 探讨 


fibez 树 的 根 节点 是 HostRootFiber 节 点 ,所 以 第 一 
次 进入 beginwork 会 调用 updateHostRoot(current， 


worklnProgress, renderLanes) 


// 省 略 与 本 世 无 天 代码 


function updateHostRoot (CUFTenty，， WOLTKInPPEOGdGI 


三 
einsne 
@ems 
@emis 瑟 


Coenmesk 


状态 计算 ， 更 新 整合 到 WOLFKIDPPFrogreSss .mem 
UpdateQueue = WOLrKInProdgress.upadqateQl 
nextProps = WOLTKInPProgress .PendqingPL 
PreVvState = WOLTKInPFrogress .memoizedSt 


PreVvChiladren = PreVState !== nullLl ? k 


cloneUpdateQueue (current，，worKInProdress) ; 
遍历 updqateoueue .shared.pendqing， 提取 有 足 馆 
PrFrocessUpdateeueue (WOFKInPFCOgress neKtPLrCT 


GOsE 


入 全 2 


nexXtState = WOTKIDPProdgdress .memoizedSt 
获取 下 级 ` ReactElement ` 对象 


Const nextChildqren = nextState.elLlement， 
Const root: ERipbperRoot = WOTrKIDPPFrodress .stat 
If (zioot .hydqrate && entezrHyadqrationState (woi 
// .. .服务 端 泻 染 相 关 ， 此 处 省 略 
} else { 
// 3. 根据 `ReactElement ` 对 象 ， 调用 ` zeconci] 
zeCconcileCchildren (currenty，， WorKInPrOdGTreSs 
} 


zeturn WorkInProgress .child'; 


普通 DOM 标签 类 型 的 节点 (如 aiv,span,p), 会 进入 
updateHostComponent: 


// .. .省 略 部 分 无 关 代码 
function updateHostComponent ( 
EU IO | 
WOLTKInProdgtress: REipbper， 
CendqerLanes: Lanesy， 
) 
// 1. 状态 计算 ， 由 于 HostCcomponent 是 无 状态 组 件 ， 
Const type = WOTrKIDProdgress .七 YPe，; 
Const nextPtrops = WOLTKIDnPEogress .PendingPL 


Const PreVZProps = CuUrrent !== mnull 2? currei 


// 2. 获取 下 级 `ReactElement ` 对 象 


Tet nextChildren = PnextProps .childqrenl; 


Const 1isDirectTITextChilad = ShouladSetTextCont 


RSIDNIRASICIEIUECEGINOTCI 
// 如 果子 节点 只 有 一 个 文本 节点 ， 不 用 再 创建 一 


nextChildqren = nul1l，; 


}) else if (PrevProps !== null && ShouladqSet” 


// 特殊 操作 需要 设置 fiper .flads 
WemkmnEisoogeess 且 后 iadqs | = ContentResek， 
】 
// 特殊 操作 需要 设置 fiper .flags 


询 囊 长 恨 全 全 人 名 疝 天 下 全 站 有 入 G 王 | 下放 天 人 @ 乓 Sisis 元 


// 3. 根据 `ReactElement ` 对 象 ， 调用 ` zeconcile 


reconcilechildren(current，，workInProdressy， 


下 EU 人 OKTORTEOoEESSRCNI OO 


回溯 阶段 completeWork 


completeUnitofWork (unitOfWork) (源码 地 址 )， 处 
理 beginwork 阶段 已 经 创建 出 来 的 fiber 节点 , 核 
心 逻辑: 


1. 调用 completework 


。 给 fibeszr 节 点 (tag=HostComponent， 


HostText) 创 建 DOM 实例 , 设 

置 fiber.stateNode 局 部 状态 

(如 tag=Hostcomponent，HostText 节 点 : 
fiber.stateNode 指向 这 个 DOM 实例 ). 

。 为 DOM 节点 设置 属性 , 绑 定 事件 (这 里 先 
说 明 有 这 个 步骤 , 详细 的 事件 处 理 流 程 ， 
在 合成 事件 原理 中 详细 说 明 ). 

。 设置 fiber.flags 标 记 

5. 把 当前 fiber 对 象 的 副作用 队列 
(firstEffect 和 1astEffect) 添 加 到 父 节 点 的 
副作用 队列 之 后 , 更 新 父 忆 点 的 firstEffect 
和 1astEffect 指 针 . 

6. 识别 bsginwork 阶 段 设 置 的 fiber.flags, 判断 
当前 fipber 是 否 有 副作用 ( 增 , 删 , 改 ), 如 果 有 ， 
需要 将 当前 fiber 加 入 到 父 节 点 的 eftfects 队 
列 , 等 待 c<ommit 阶 段 处 理 . 


function completeUnitoOofWork (unitOofWork :| Eibei 
Jet _ completedqWork = unitOfNWorK:， 
// 外 层 循环 控制 并 移动 指针 (` workInProgress` ， col 


ea 
Const Curent = CompletedqWork .alternate，; 
Const LetuzcnEipbez = CompletedqWorKk .zetuzn:， 


If ((complLletedqNWork .flags & IncomplLete) =: 


et mext， 
// 1. 处 理 Fibezr 节 点 ， 会 调用 这 染 器 (调用 react 


next = Comp1leteWork (CUrtenty，，， complLetedry 
If (next !== mul1L) 1{ 
// 如 果 派 生出 其 他 的 子 节 点 ， 则 回 到 ` beginwo 
WOLTKIDnProdgress = mext/; 
iiini 


} 
// 重 置 子 节 点 的 优先 级 
resetChildqLanes (Comp1LetedqWork ) ; 
UNE 
zeturnEipber !== mnul1 && 
(zeturnEiber.flags & Incomplete) === 
) 
// 2. 收集 当前 Fibez 节 点 以 及 其 子 树 的 副作用 
// 2.1 把 子 节 点 的 副作用 队列 添加 到 父 节 点 上 


If (zetutcnEipbper .firstEffect === mul1Ll) 
zeturnEipber .firstEffect = Comp1ete% 

) 

If (completeqWorKk .LastEffect !== nul] 
If (zetutcnEipber .LastEaffect !== nul- 


zetutrnEipbper .LastEffect .nexXtEftfect 
} 
returnEibper. LastEffect = Completedr 
} 
// 2.2 如 果 当 前 fibezr 节 点 有 副作用 ， 将 其 添 力 
Const fladgs = CompPpletedqWork .fags:，; 
JECETSOSEReEEocnmeawaWoe 1{ 


// PerformedWork 是 提供 给 React DevTa 
If (zetutrcnEipber .LastEaffect !== nul- 
zetutrnEipbper .lastEffect .nexXtEftfect 
} else { 
zeturnEipbper .firstEffect = Complet 


} 
returnEibper. LastEffect = Completedr 


】 
} else { 


// 异常 处 理 ， 本 蔬 不 讨论 


Const SipblingEiper = CompletedqWork .Siplixi 
If (siblLlingEFibper !== mnul1L) 1{ 
// 如 果 有 兄弟 节点 ， 返回 之 后 和 再 次 进入 ` peginWoal 
WOLTKInProdgtress = SipbplingEFiper; 
蛤 eleuunsmny 


} 
// 移动 指针 ， 指 向 下 一 个 节 点 


CompletedqWork = LeturnEiper， 
WOTKIDProgress = CompPpletedqWork， 
} while (completeqNWork !== nul1lL) ，; 
// 已 回溯 到 根 节 点 ， 设置 workInProgressRoot 瑟 Xi: 
If (worKIDPProdtresSsRootEXxX1itStatus === RootIIi 


WOLTKIDnPEodgresSRootEXxX1itLtStatus = RootComp1s 


接 下 来 分 析 fiber 处 理子 数 completeWork 


function completeNWork ( 
EU ES 了 UN 
WOLTKInProdgtress: REipbper， 
CendqerLanes: Lanesy， 
iT 
Const newProps = WOLTrKInProdgtess .PendqingProtk 
Switch (workInProgress.tag) { 
case ClassCompPonent : { 
// class 类 型 不 做 处 理 
监 全 起 癌 基 仙 省 而 加 可 本 瑟 
】 
Case HostRoot : { 
Const fipbperRoot = (woTKIDnProdgresSss .Stat 
CODE ROGERESnanmnoCeonEE 坟 已) 珊 于 
fipbperRoot .ContexXxt = fiberRoot .PenadQinc 
fibperRoot .pendqingContext = mul1l; 
】 


TECNEEE 主 II 川 基 SEEETEREhild : 
// 设置 fiber.flags 标 记 
WwWOLrKInProgress .fags 医 Snapshot， 


} 


SENSI REOD 


} 


case HostComponent : 1{ 


PoPHostContext (WOFKInProgress) ; 


Const rootContainerInstance = 9etRocotH 
Const type = WoOrKIDPProdgress .七 YPe，; 
IE (Curtent !== nul1lL && WwWorkInProdgress ， 


// _ update 逻辑， 初次 render 不 会 进入 


} else { 


Const CUrrentHostContext = 三 9etHestCor 
// 1. 创建 poM 对 象 
const instance = createInstance ( 

七 YPev 


meWREODS 
zxootContainezInstancey 
bpDeIeSigNBISEGNSNEIGKe)aNE SEE 
woOLrKInProdressy 
) 7 
// 2. 把 子 树 中 的 DoM 对 象 append 到 本 节点 的 D4 
abppendA1L1LChildren(instance woOrKInPT- 
// 设置 stateNodqe 属 性 ， 指 向 poM 对 象 
WOLTrKInProdress.stateNodqe = instance， 
人 
// 3. 设置 poM 对 象 的 属性 ， 绑 定 事件 等 
月 由 三 同 |EC 的 99 风 攻 = 辣 WG9 和 风格 obesnR 
Instancey 
七 YPev 
DewPzops， 
cootContainezInstancey， 


区 忆 芋 下 外 站 七 是 忆 SECOn 巧 全 区 七， 


| 
// 设置 fiber.flags 标 记 (Upaate) 
markUpdate (worKInPProdgress) ; 


】 

IE (workInProdgress.ref !== nulLlL) 1{ 
// 设置 fiper.flags 标 记 (Ref) 
markRef (woOFrKIPnProgress) ; 


} 


SITEHDUGNTEEOD 辣 天 帮 


可 以 看 到 在 满足 条 件 的 时 候 也 会 设置 fiber.flags， 
所 以 设置 fiber.flags 并 非 只 在 beginwork 了 阶段. 
过 程 图 解 

针对 本 节 的 示例 代码 , 将 整个 fiber 树 构造 过 程 表 示 
出 来 : 

构造 前 : 

在 上 文 已 经 说 明 , 进入 循环 构造 前 会 调 


用 prepareFreshstack 刷 新 材 帧 , 在 进入 fibezr 树 构造 
循环 之 前 , 保持 这 这 个 初始 化 状态 : 


fiber 树 构造 过 程 (构造 前 ) 


aubtreeRenderLanes = 


H/ 
type-classtApp) 
还 未 执行 render emate 
beginWorH 


ReactElement 结 构 | 人 er 树 2( 内 存 中 ) fiber 树 1( 当 前 页 面 , 首次 构造 ,页面 未 泻 染 ) 
performUnitOfWork 第 1 次 调用 (只 执行 beginwork): 


日 执行 前 : workInProgress 指 针 指 
向 HostRootFiber.alternate 对 象 ， 此 
时 -current 三 workInProgress.alternate 指 
加 fiberRoot current 是 非 空 的 (初次 构造 ， 问 
在 根 节 点 时 ， curtrent 非 空 ). 

到 执行 过 程 : 调用 upaateHostRoot 


GO 在 reconcilechildren[ 从 自 ， 向 下 构 
造 次 级 子 节点 fiber (<App/>), 同时 设置 子 
万 氮 (fiber (<ApP/>) )jfiber.flags |= 
Placement 
。 执行 后 : 返回 下 级 节点 fiber (<App/>), 移 
动 wvorkInProgress 指 针 指 向 子 节 


点 fiber (<APP/>) 


fber 树 构造 过 程 (构造 进行 中 ) 


aaade arrent 。 statahtode 
| 
/ 
herane 
tyPe-clasatAPP 
还 未 执 符 
chid rehm 
2 
人 二 
全 本 人 em 
7 =( <App> 上 ace 
E 
ReactElement 结 构 fiber 树 2( 内 存 中 ) fiber 树 1( 当 前 页 面 , 首次 构造 , 页 面 未 泻 染 ) 


performUnitOofWork 第 2 欠 调 用 (上 只 执行 bsginwork): 


se 执行 前 : workInProgress 指 针 指 
向 fiber(<App/>) 节 点 ， 此 时 -current = null 


。 执行 过 才 程 : 调用 upaateclas SComponent 


O 本 示例 中 , class 实例 存在 生命 周期 子 
数 componentDidqMount, 所 以 会 设 
置 fiber(<App/>) 节 点 
worklnProgress.flags |= Update 

GO 另外 也 会 为 了 React DevTools 能 够 识别 状 
态 组 件 的 执行 进度 , 会 设置 
worklnProgress.flags |= 
PerformedWork( 在 <ommit 阶 段 会 排除 这 
个 flag, 此 处 只 是 列 
出 workInProgress 5 flags 的 设置 场景 ， 不 
讨论 React DevTools) 


需要 注意 classIinstance.rendetr() 在 本 


步骤 执行 后 , 虽然 返 回 了 renaez 方 法 中 所 
有 的 ReactElement 对 象 ， 但 是 随 
后 reconcilechildren 只 构造 次 级 子 节点 
G 〇 在 reconcilechildqren[ 从 段 ， 向 下 构 
造 次 级 子 节点 aiv 
。 执行 后 : 返回 下 级 万 点 fiber (div), 移 
动 vorkInProgress 指 针 指向 子 节 点 fiper (daiv) 


人 er 树 构造 过 程 (构造 进行 中 ) 


ordnprogressRoothendslanes = ML wanpogeasRoote 一 
beehendetanes NeLn 有 
AN 
aueNode 下 ashode 
sy 上 


~ 人、 <Paoe |] 
(wpp> 人 Se 
propschidren 
+ [ antamals 
chldren 是 一 个 数组 in 
header tpa-caafcontend 5 [se | 
hildran=*header” 到 本 区 行 oradkor \ 1 
， propschildren-"header” 。 怀 让 汉 全 wordnproaress 的 
earwor 
ReactElement 结 构 fiber 树 2( 内 存 中 ) flber 树 1( 当 前 页面 , 首次 构造 , 页 面 未 泻 染 ) 


performUnitOfNWork 第 3 次 调用 (只 执行 beginwork): 


上 执行 前 : workInProgress 指 针 指 向 fiber (qiv) 
节点 ， 此 时 -urrent = muUl1l 


执行 过 程 : 调用 upaateHostcomponent 


O 〇 O 在 reconcilechildren 阶 段 ,向 下 构 
造 次 级 子 节点 (本 示例 中 ，aiv 有 2 个 次 级 子 
节 点 ) 
。 执行 后 : 返回 下 级 节点 fiber (header), 移 


动 wvorkInProgress 指 针 指 向 子 节 


点 fiber (header) 


VSA 


fber 树 构造 过 程 (构造 进行 中 ) 


wordnProgrsssRootRenderlanes = NcLanes 。 wordnPorgreasRocts 人 日 barRoot 
aubtreeRenderLanee = NeLanes - 


ao 
一 2 
本 一 束 一 
pa as 4 
人 
ediv | 
本 < 
Updata ， 
repachidmen ({ <App> 人 和 
， 、 妥 s 
chidren 是 一 个 数组 - ee 
Pestesd yperclsss Content 和 @ 
Props childre dd 还 条 执 -一 Instance 
二 dv | 
egimonl / 
0 
| 
ba 而 和 
TY s 
header } saine .( <Content> 
ReactElement 结 构 iber 树 2( 内 存 中 fiber 树 1( 当 前 页 面 , 首次 构造 ,页面 未 浓 涩 ) 


performUnitofwork 第 4 次 调用 (执行 beginWork 


和 completeUnitOofWwork): 


昌 beginwork 执 行 前 : workInProgress 指 针 指 
回 fiber (header) 节 点 ， 此 时 current = null 
s beginwork 执 行 过 程 : 调 


用 updqateHostcomponent 


〇 本 示例 中 headaer 的 子 节 点 是 一 个 直接 文本 
节点 ,设置 nextChildren = null( 直 接 文本 节 
点 并 不 会 被 当成 具体 的 fiber 忆 点 进行 处 
理 , 而 是 在 宿主 环境 ( 父 组 件 ) 中 通过 属性 进 
行 设 置 . 所 以 无 需 创建 ostText 类 型 的 


fiber 节 点 , 同时 节省 了 向 下 遍历 开销 .). 
〇 由 于 nextchildqren = nul1, 经 
过 reconcilechildqren 了 阶段 处 理 后 , 返回 
值 也 是 nul1 
。beginWork 执 行 后 : 由 于 下 级 节点 为 null, 所 以 

进入 completeUnitofwork (unitofWwork) 琢 数 ， 

传 入 的 参数 unitofwork 实 际 上 就 

是 workInProgress( 此 时 指向 fiper (heaqer) 闻 


氮 ) 


fiber 树 构造 过 程 (构造 进行 中 ) 
workdnProgressRootRanderLanes = NoLanes workinP' te 
aubtreeRenderlanes = NoLanes 
aeN6a 
医 妥 念 ” - 
本 证 柯 ， 
下 
ediv 1 
ep， 区 ep Re 
/ 和 Updae 
EN (aepw 人 5 
| N 区 8 
| 一 ws 
| ii 
ype-rheader ype-desaContent | 证 S9 
props.children=*header” 还 来 执行 rende 本 
npragress 人 
omplaewbrd 入 
2 
| 原生 3 
3 
eader 上 samng .| <Content/> ) 
区 
Reactglement 构 二 fiber 树 2( 内 存 中 ) fiber 权 1( 当 前 页 面 , 首次 构造 , 页 面 未 泻 染 ) 


和 completeUnitofWwork 执 行 
前 : workInProgress 指 针 指 向 fiber (headqer) 
刷 点 

和 completeUnitofwork 执 行 过 程 : 


以 fiber(headezr) 为 起 点 , 向 上 回 漳 


第 1 次 循环 : 
1 . 执行 completework 四 数 


。 创建 tiber (header) 节点 对 应 的 poM 实 例 ， 
并 append 子 节点 的 poM 实 例 

。 设置 po 属性 , 绑 定 事件 等 (本 示例 中 , 节 
点 fiber (header) 没 有 事件 绑 定 ) 

4. 上 移 副 作用 队列 : 由 于 本 世 点 fiber (header) 没 
有 副作用 (fiber.flags = 0), 所 以 执行 之 后 副 
作用 队列 没有 实质 变化 (目前 为 空 ). 

5. 向 上 回溯 : 由 于 还 有 兄弟 万 点 ， 

把 workInProgress 指 针 指 向 下 一 个 兄弟 节 
点 fiber (<Content/>), 退 


出 completeUnitOofWork. 


fiber 酝 构造 过 程 ( 购 造 进行 中 


民 


1 1 fiber 树 2( 内 存 中 ) Tiber 树 1 人 当 前 页 面 , 首次 构造 ,页 面 未 泻 染 ) 


performUnitOofWork 第 5 次 调用 (执行 beginwork): 


和 执行 前 :werkIinProgress 指 针 指 
向 fiber (<Content/>) 斑点 . 

。 执行 过 程 : 这 是 一 个 class 类 型 的 节点 , 与 第 2 
次 调用 逻辑 一 致 

。 执行 后 : 返回 下 级 万 点 fiber (p), 移 


动 workIinProgress 指 针 指 向 子 节 点 fiber (P) 


fiber 树 构造 过 程 (构造 进行 中 ) 
wondnprogrsaaRootRenderLanes -ii worinPorgreasRoot 全 和 
uibieeRendentanea = 人 一 抽 


可 at aaa 
的 
全 念 有 一 
人 | 
ad 
人 人 
qu 
下 本 
chidren 是 一 个 和 组 See 
Se 了 “9 
4 ) 
ropachildren=“header SPeeaeconen 8 
1 中 |】 
opa samn _ 
E chad 
ran ww 
WiRoae 再 
人 人 ER update 
me header 上 aasng -| <Content> ] Petom 
chidren 是 一 个 数组 玫 CT AR 
EL 人“EE 
ape- RE 了 
rops.childrer rops.childrei Lasr | 于 各 
到 人 
p aa- 人 ) 
二 
4 
旭 
Reactaement 结 构 0 fber 皇 2 内 存 史 fbber 树 1( 当 前 页 面 ,首次 构造 页面 未 这 冰 ) 


performUnitofwork 第 6 次 调用 (执行 bsginwork 

和 completeUnitofwork): 与 第 4 次 调用 中 创 

建 ftiber (header) 节点 的 逻辑 一 致 . 先后 会 执 

行 beginWwork 和 completeUnitOfWork， 最 后 构造 
DOM 实例 , 并 将 把 vorkInProgress 指 针 指向 下 一 个 


兄弟 节点 fiber (p). 


fber 树 构造 过 程 (构造 进行 中 
woridnProgressRootRenderLanes workinPorgrassRoot 如 | 
dotanea 
WE Curent abatahoda 
PP / 
Hyper-casslApp 一 一 
popaduamn 
1 
am 
tpenrdiw ， 二 
| 
> pa 
opadhidn 
<app> 1 
< 
chiaren 是 一 个 数组 人 
ear oo 
me 民 “9 
propa chiamn 、 
1 Ed 
ra 
ype-ReactFragmel 外 
| / ， ee 
9 (neader mm came 人、 
nildren 是 一 个 数组 人 
RE 
Er 


ReactElement 结 构 


fiber 树 1 当前 页 面 , 首次 构造, 页 面 未 澶 染 } 


performUnitofwork 第 7 次 调用 (执行 beginWork 
和 completeUnitOofWork): 


beginwork 执 行 过 程 : 与 上 次 调用 中 创 
建 ftiber (p) 节点 的 逻辑 一 致 


completeUnitofwork 执 行 过 程 : 以 fiber (P) 为 


起 点 , 向 上 回 淹 
次 循环 : 
执行 completework 国 数 : 创建 fiber (P) 节点 对 


应 的 poM 实 例 , 并 appena 子 树 节 点 的 poM 实 例 
. 上 移 副 作用 队列 : 由 于 本 节点 fiber (p) 没有 副 


作用 , 所 以 执行 之 后 副作用 队列 没有 
(目前 为 空 ). 

3. 向 上 回溯 : 由 于 没有 兄弟 节点 ， 
把 werkIinProgress 指 针 指 向 父 节 


点 fiber (<Content/>) 


fiber 树 构造 过 程 (构造 进行 中 ) 
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世 导 辐 
ReactBement 构 fber 树 2 内 存 中 


fiber 树 1( 当 前 页 面 ,首次 构造 , 页 面 未 沪 涩 ) 


2 次 循环 : 


1. 执行 completework 辑 


处 理 


实质 变化 


数 : class 类 型 的 节点 不 做 


2. 上 移 副 作用 队列 : 


本 节点 fiber (<Content/>) 的 flags 标 志 


位 有 改动 


(completeqWork .flags > PerformedWork)， 
将 本 节点 添加 到 父 节点 (fiber (div) ) 的 副 
作用 队列 之 后 (firstEffect 和 lastEffect 
属性 分 别 指向 副作用 队列 的 首部 和 尾部 ). 

4. 向 上 回 漳 : 把 workinpProgress 指 针 指 向 父 节 


点 fiber(qiv) 


fiber 树 构造 过 程 ( 构 造 进行 中 
wordnprogressRootRendertanes =- wonianPorgreasRoot 全 人 
eubtreeRanderLanes = 和- 所 


ypa-dassAppl 一 一 -一 
epa shiamn 
oa 
byPes' 上 一 一 、 
et age Pa 
、 一品 -_ < 
ea 
epa damn 二 上 
直 workinProgrmen 现 nm 
hidren 是 一 个 数组 人 earpi 六 一 本 
下 ad Ce 外 
wopachildren-vheader。 9Pe eenten 一 斌 河 
[oni 
人 e 人 -一 tmaemect 
mapaauiammn aaEect 
划 呈 
To 《 am 
type-ReactFregment 和 光 [ 二 
T 泊 TUpdale 
props children headk ee <Content/> 本 _ em 
chidren 是 一 个 数组 了 汪 ae 
本 AR 
。 可 人 ] 
攻 2 
这 
ropschildren-“1” propachildre 
ae -| p 
和 
后 网 同人 
-2 | fiber 树 2 内 存 中 ) fiber 树 1 当前 页 面 , 首次 构造 ,页面 未 党 染 ) 


第 3 次 循环 : 


1 . 执行 completework 国 数 : 创建 tiper (QiV) 节点 
对 应 的 poM 实 例 , 并 append 子 树 节 点 的 poM 实 例 
2. 上 移 副 作用 队列 : 


。 本 节点 fiber(div) 的 副作用 队列 不 为 空 ， 
将 其 拼接 到 父 节 点 fiber<app/> 的 副作用 


队列 后 面 . 
4. 向 上 回 漳 : 把 workInProgress 指 针 指 向 父 节 


点 fiber (<APP/>) 


fiber 树 构造 过 程 (构造 进行 中 


Peradaad WAFP) 
本 
penrdiv 
re 本 
hidren 是 一 个 数组 
ypecrheader 
propschildren-* ee 下 
mpachidren 
上 
ype-ReactFragment 
| wan 
ildren 是 一 个 数组 > 
pan"p， Hyper 
props.children-*1“ propsdl hildren=*27 村 
> 本: 
( pp ha p ) 
N 人 本 
rr 
后 加 | 
人 人 er 树 2 内 存 中 fiber 树 1( 当 前 页 面 ,首次 构造 , 页面 未 泻 染 ) 


1 . 执行 completework 轩 | 效 : class : 类 型 的 节 点 不 做 
处 理 
2. 上 移 副 作用 队列 : 


。 (<App/>) 的 副作用 队列 不 为 
空 , 将 其 拼接 到 父 书 
点 fiber (HostRootFiber) 的 副作用 队列 
业 : 
。 本 万 点 fiber(<App/>) 的 flags 标 志 位 有 改 


动 

(completeqWork .flags > PerformedWork)， 
将 本 书 点 添加 到 父 书 

点 fiber (HostRootEiber) 的 副作用 队列 之 
后 . 


| 


本 节点 在 后 
6. 国生 站 


点 fiber (HostRootEiber) 


fiber 树 构 千 过 程 (构造 进行 中 


WPe-cienfAPP) 


人 
perar 
本 吧 剑 本 
children 是 一 个 数组 
2 
和 和 
paqamn 
AR 
等 
hidren 是 一 个 组 
panrp tpenrpr 
Ha hildrei 站 
ER 人 动 
St Sr 
二 二 
op ts 
1 3 
ReactEement 结 构 | bear 本 2( 内 存 听 Tuber 本 1 前 页 面 ,首次 构 过 页面 未 演 痢 


1. ee 对 于 HostRoot 类 型 的 
点 , 初次 构造 时 设置 worklnProgress.flags |= 
2. 向 上 回 漳 : 由 于 父 节 点 为 空 , 无 需 进 入 处 理 副 作 


用 队列 的 逻辑 . 最 后 设 
置 workIinProgress=nul1， 并 退 


出 completeUnitOofWork 


fiber 树 构 进 过 程 (构造 完成 


aubtreeRenderlanes = 人 
ordnPragmass 


ReactElement 结 构 er 树 2( 内 存 中 fiber 树 1( 当 前 页 面 ,首次 构造 ,页 面 未 泻 染 ) 


到 此 整个 fibsr 树 构造 循环 已 经 执行 完毕 , 拥有 一 棵 完 
整 的 Eiber 树 ， 0 岳 一 持 载 了 一 作 
用 队列 , 员 深 子 节点 越 靠 
前 . 


rendqerRootSync 性 | 纯 数 退 呈 出 之前， 会 重 

置 workInProgressRoot = _ null, 表明 没有 正在 进行 
中 的 renaer. 且 把 最 新 的 #iber 树 挂 瞄 

到 fiberRoot .finishedwork 上 . 这 时 整个 fiber 树 的 
内 存 结 构 如 下 (注意 fiberRoot .finishedWork 


和 fiperRocot . current 指 针 , 在 commitRoot [ 介 段 会 进 


行 处 理 ): 


fiber 树 构 内 存 结构 


fiber 树 1( 当 前 页 面 , 首次 构造 , 页 面 未 泻 染 ) 


本 节 演 示 了 初次 创建 fiber 树 的 全 部 过 程 , 跟踪 了 创 
建 过 程 中 内 存 引 用 的 变化 情况 . fibez 树 构造 循环 负 
责 构 造 新 的 fiber 树 , 构造 过 程 中 同时 标 

记 fiber.flags, 最 终 把 所 有 被 标记 的 fiber 节 点 收 
集 到 一 个 副作用 队列 中 , 这 个 副作用 队列 被 挂 载 到 根 
节点 上 (HostRootFiber.alternate.firstEffect). 


此 时 的 fibper 树 和 与 之 对 应 的 poM 节 点 都 还 在 内 人 存 当 


CommiItRocot 了 
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十 
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fiber 树 构造 (对 比 更 新 ) 


原文 : https:W/github.com/7kms/react- 
诈 Ustration-series/blob/main/docs/mainm/ 
fibertree-update.md 


title 
fiber 树 构 造 ( 对 比 更 新 ) 


在 前 文 fiber 树 构造 (初次 创建 ) 一 文 的 介绍 中 , 演示 
了 fiber 树 构造 循环 中 逐步 构造 fibez 树 的 过 程 . 由 于 
是 初次 创建 , 所 以 在 构造 过 程 中 , 所 有 节点 都 是 新 建 ， 


本 节 讨 论 对 比 更 新 这 种 情况 (在 egacy 模 式 下 进行 分 

析 ). 在 阅读 本 节 之 前 , 最 好 对 fiber 树 构造 (初次 创建 ) 
有 一 些 了 解 , 其 中 有 很 多 相似 遇 辑 不 再 重复 叙述 , 本 
节 重 点 突出 对 比 更 新 与 初次 创建 的 不 同 之 处 . 


本 节 示 例 代 码 如 下 (codesandbox 地 址 ): 


import React from "Teact " ; 


Class APP extendqs React .Component { 


State = { 
了 Se 
} 1; 
nchiangee= 汪 从 于 三 之 于 
SetesEseeEIESE SOOAANOSLAS' |] ]}); 


} 
ComponentDidqMount () 1{ 
Consee 本 ooaeAeiMoUnniagi 
Cenqaqecr () { 
Ceturn (人 
< 
<Headqer /> 
<button onClLick={this.onchangej}>chanc 
<Qiv ClLassName="Ccontent"> 
enagsSEeeeeESEsTYaloONEET 间 三 之 司 | ( 
<D key={fitemlj>{fitem}j</PD> 
) 忆 天 
多 Ai 旋 


wy 


Class Header extendqs React .PureComponenk 1{ 


Cenaqer () { 


Sheupboig 世人 
Ke 
< 天 和 这 
二 
< 
) ; 


} 


expPort aqQefault APP， 


在 初次 泻 染 完成 之 后 , 与 fiber 树 相关 的 内 存 结构 如 下 
(后 文 以 此 图 为 基础 , 演示 对 比 更 新 过 程 ): 


fber 柑 内 存 结构 


fber 精 2( 内 存 鸣 fiber 树 1 们 前 页 面 


更 新 入 口 


前 文 reconciler 运作 流程 中 总 结 的 4 个 阶段 (从 输入 

到 输出 ), 其 中 承接 输入 的 函 效 只 

有 scheduleUpdateonFiber( 源 码 地 址 )， 

在 r*eact-reconciler 对 外 暴露 的 api 函数 中 , 只 要 
涉及 到 需要 改变 fiber 的 操作 (无 论 是 首次 泻 染 
或 对 比 更 新 ), 最 后 都 会 间接 调 

用 schedquleUpdqateonEiber，schedquleUpdateonFiber 上 吸 


数 是 输入 链 路 中 的 必 经 之 路 . 


3 种 更 新 方式 
如 要 主动 发 起 更 新 , 有 3 种 弟 见 方式 : 


1. class 组 件 中 调用 setstate. 
2. function 组 件 中 调用 hook 对 象 暴 露出 
的 aispatchaction， 
S 在 containezr 世 点 上 重复 调用 render( 官 网 示例 ) 


下 面 列 出 这 3 种 更 新 方式 的 源码 : 


setState 


在 component 对 象 的 原型 上 挂 载 有 set state( 源 码 链 


接 ): 


Component .Prototype.setState = function(Pat: 
七 niIis.upaater.endueueSetState (nhis PatrtIal: 
} 1; 


在 fiber 树 构造 (初次 创建 ) 中 的 beginwork 阶 段 ,class 
类 型 的 组 件 初 始 化 完成 之 后 ， 七 hs 。 updqater 对 象 如 
下 (源码 链接 ): 


Const classCcomponentUpadater = { 
1ISMounted， 
endqueueSetState (Inst，，payloadq，，callpbpack) { 
// 1. 获取 class 实 例 对 应 的 Eibez 节 点 


Const fibper = getInstance (1Inst) ; 

// 2. 创建 update 对 象 

Const eventTinme = fedquestEventTime () ; 
Const lane = FredquestUpdqateLane (Eipber) jy / 
Const update = createUpdate (eventTITimey， 1: 


Update.payload = PaylLoad:; 
If _ (callback !== unaefineaQ && calLlback 1!: 
Upbeakte 有 eaaslloack 三 三 eaiiOaeis， 


// 3. 将 update 对 象 添 加 到 当前 Fiber 节 点 的 upqaat 
endqueueUpdate (fiper，update) ; 

// 4. 进入 reconciler 运 作 流程 中 的 ` 输入 ` 环节 
ScheduleUpadateoOnE ipber (fiber， Laney event 1 


上 
] ; 


dispatchAction 


此 处 只 是 为 了 对 kai SpatchAction 
和 setstate. 有 关 hook 原 理 的 深入 分 析 ， 
在 hook 原理 章 万 中 详细 讨论 . 


在 function 类 型 组 件 中 , 如 果 使 用 hook (usestate)， 
则 可 以 通过 hook api 暴 露出 的 aispatchaction( 源 


码 链接 ) 来 更 新 


IDUeKGIE SOILSISEIEeoVACIESROTESS 国人 有 
fiper: ERiper， 
queue: UpdateQueue<S，A>， 
aeGleroms 六 7 
| 
// 1. 创建 update 对 象 
Const eventTinme = TiedqduestEVentTime () ; 
const lane = FedquestUpdateLane (Eiber)|) // 1 
const _ update: Update<S，A> = 1{ 
aneyv 
Eieneanikeio 下 
eagerReduceLr: nul1l， 
eagerState: nul1l， 
人 全 文本 :EU ES) 天 
和 
// 2. 将 updqate 对 象 添 加 到 当前 Hook 对 象 的 updateou 
const pendqindg = Gdqueue.pendinad， 
If (Penaing === nulL1L) { 
Update.next = update， 
} else 1{ 
Update.next = Penadqind.next， 


Penadqindg.next = updqate，; 


} 
dueue .pendinda = Update， 
// 3. 请 求 调度 ， 进 入 reconciler 运 作 流 程 中 的 ` 输入 


ScheduleUpadateoOnE ipber (fiber， Laney evVentTin 


重复 调用 render 


Import ReactDOM from "react-adqom '" ; 
USE 全 丽人 | 
Const element = (人 
<aaR 全 
有 区 有 区 | 本 GE 押 和 堪 
<h2>It is {new Date () .toLocaleTITimesStLiri 
< > 
) ;7 
ReactDOM.renadqer (element，Qqocument . gdetE1Lemer 


】 
SetInterval (七 ICK， 1000) ，; 


对 于 重复 *enqer， 在 React 应 用 的 局 动 过 程 中 已 有 说 
明 , 调用 路 径 包 


含 updqaatecontainer >ScheduleUpdateoOnEiperL 


故 无 论 从 哪个 入 口 进 行 更 新 , 最 终 都 会 进 

入 schedquleUpdqateonEiber, 册 次 证 

明 schedauleUpdateonEiber 是 输入 [阶段 的 必 经 
函数 (参考 reconciler 运作 流程 ). 


构造 阶段 


逻辑 来 到 scheduleUpdateOnFiber 函 数 : 


// .. .省 略 部 分 代码 
expDort function schedquleUpdateoOnEiper ( 
fiber: Fiber，// fiper 表 示 被 更 新 的 节点 
lane: Lane，// lane 表 示 update 优 先 级 
eVventTime: number， 
) 计 | 
Const root = markUpdateLaneEFromEiberIToRocot 
If (Lane === SyncLane) { 
人 
(executionContext & Ledg9acyUnbatchedCont 
(executionCcContext & (RendqercrContext 人 
Ja 
// 初次 演 染 
局 omeyneNWeoneskEOnRoot 二 人 ooii 过 
} else { 
// 对 比 更 新 


enSsSureRootIsScheduledq (root，eventTime) ; 


】 
mostRecent1LyUpdatedqRocot = Foot，; 


对 比 更 新 与 初次 泻 染 的 不 同 点 : 


1. markUpdateLaneFromFiberToRoot 函 数 , 只 
在 对 比 更 新 阶段 才 发 控 出 它 的 作用 , 它 找 出 
了 fipber 树 中 受到 本 次 updaate 影 响 的 所 有 节点 ， 
并 设置 这 些 节 点 的 fiber.lanes 
或 fiber.childLanes( 在 legacy 模 式 下 
为 syncLane) 以 备 fiber 树 构造 叭 段 使 用 . 


function markUpdateLaneEFzromEipbperIToRoct ( 
sourceEiber: FEiber，// sourceEiber 表 示 被 更 新 
lane: Lane，// lane 表 示 update 优 先 级 

下 iTRSSLE IEEGDINRE 
// 1. 将 update 优 先 级 设置 到 sourceFiber.1lanes 


SOUTCeE liber. Lanes = merdgeLanes (SOUrCeE iliber， 
et alternate = SourceEipbper .alternate，; 
If (alLtetrnate !== mulL1L) 1{ 


// 同时 设置 sourceFipbper.alternate 的 优先 级 


alternate.anes = merdeLanes (altetrnate .1]: 


// 2. 从 sourceFEibezr 开 始 ， 向 上 志 历 所 有 节点 ， 直到 


Jet node = SoOUrCceEipbper， 
et Parent = SOUrCeEiber.return'; 
while (parent !== nul1lL) { 
Parent .childqLanes = merdgeLanes (Parent . ch : 
alternate = Parent .alternate， 
If (alternate 1!== mul1l1) { 
alLtetrnate .childLanes = merdeLanes (alLtei 
} 
node = Parent，; 
站 
】 
if (nodqe.tag === HostRoot) ({ 
Const root : PEFipbperRoot = noqe.stateNode:; 


SSEDDenRSeIGIET 
} else { 


sueUDag ob 同 攻 


markUpdateLaneFromFiberToRoot 


下 图 表示 了 markUpdateLaneFromEiberToRoot 的 县 


体 作 用 : 


。e 以 sourceFiber 为 起 点 , 设置 起 点 


的 fiber.lanes 

。 从 起 点 开始 , 直到 HostRootFiber, 设置 父 路 和 
上 所 有 节点 (也 包 插 fiber.alternate) 

的 fiber.childLanes. 

。 通过 设置 fiber.lanes 和 fiber.childLanes 就 
可 以 辅助 判断 子 树 是 否 需要 更 新 (在 下 

文 循环 构造 中 详细 说 明 ). 


fper 柑 内存 结构 


1. 对 比 更 新 没有 直接 调 
用 berformsyncworkonRoot, 而 是 通过 调度 中 心 


来 处 理 , 由 于 本 示例 是 在 regacy 模 式 下 进行 , 最 

后 会 同步 执行 eezformsyncWworkonRoot.( 详 细 原 

理 可 以 参考 React 调度 原理 (Schedulen). 所 以 

其 调用 链 

路 performsyncWorkonRoot--->renderRootSync--->Y 


与 初次 构造 中 的 一 致 


在 renderRootSync 中 : 


function rendqerRootSync (oot : 了 iperRoot，， 1Lant 
Const PrevZEXecutionContexXxt = exXecutionCont 
execuenoneenmnleext 医 Remasecenieexe， 
// 如 果 fiberRoot 变 动 ， 或 者 updqate.1ane 变 动 ， 都 : 
If (worKInProdtresSsRoot !== 上 Oct 咱 WOLKInP1 
// 刷新 栈 帧 ， Ilegacy 模 式 下 都 会 进入 
PrepPareFreshsStack (oot，，1Lanes) ; 
} 
回避 证 
| 
WainooeesSynmc 人 
Dreak， 
} catch (thrownVvalLue) { 
向 有 轩 由 全 贡 了 ORGeoeneewnaiae 
} 
} while (rue) ; 


eXecutionContext = PreVExecutionContext ，; 


// 重 置 全 局 变量 ， 表明 renqezr 结 束 


WOKEOEEOOEESSSRGSE 本 三 是 人 LN 


WOrKIDProgressRootRenderLanes = NoLanes， 


zeturn WOorKInDProgresSsRootEX1itLStatus， 


进入 循环 构造 (werkLoopsync) 前 , 会 刷新 醚 帧 ( 调 
用 prepareFreshStack)( 参 考 fiber 树 构 造 (基础 准备 ) 


中 栈 帧 管理 ). 


此 时 的 内 存 结构 如 下 : 


本 
注意 : 
VIA 


。 fiberRoot .current 指 向 与 当前 页 面 对 应 
的 fiber 树 ，workInProgress 指 向 正在 构造 
的 fiber 树 . 
相 刷新 枝 帧 会 调用 cr*eateworkIinProgress () , 使 
得 workInProgress.flagqs 和 workInProgqress .effects 
都 已 经 被 重 置 . 


且 workIinProgress.child = CUTent . chiIl1 ad， 


所 以 在 进入 循环 构造 之 


前 ， HostRootEiber 与 HostRootEiber .aternate 


共用 一 个 child( 这 里 是 fiber (<App/>) )， 


循环 构造 


回顾 一 下 fiber 树 构 造 ( 初 次 创建 ) 中 的 介绍 . 整 

个 fiber 树 构造 是 一 个 深度 优先 遍历 (可 参考 React 算 
法 之 深度 优先 所 历 ), 其 中 有 2 个 重要 的 变 

量 workIinProgress 和 current( 可 参考 fiber 树 构造 
(基础 准备 ) 中 介绍 的 双 缓 冲 技术 ): 


。 WOLTKInProdres s 和 current 都 视 为 指针 


和 workInProgress 指 回 三 前 正在 构造 的 fibezr 节 
点 


VAN 
人 下) 二 workInProgress.alternate( 即 fiber.alt 


指向 当前 页 面 正 在 使 用 的 fibesr 节 点 . 


在 深度 优先 遍历 中 , 每 个 fibezr 节 点 都 会 经 历 2 个 阶 


段 : 


攻 探寻 阶段 bedginWork 


2. 回 漳 [ 介 段 ComPTeteWorK 


这 2 个 阶段 共同 完成 了 每 一 个 fipezr 下 点 的 创建 (或 
更 新 ), 所 有 fiper 万 点 则 构成 了 fibez 树 . 


TIGeGOnEENGNEEGeOeSCT 从 厂 


氏 


while (workInProdgress !== nul1lL) { 


PerformUnitoOofWork (worKIDnProdgress) ; 


. .省 略 部 分 无 天 代码 


DIVenE Reng ceiS 的 履 2 罗 和风 区 6 有 病人 ee 全 放 攻 9 吉 从 cnelsS be 的 


// unitofWork 就 是 被 传 入 的 workInProgtress 
Const current = unitoOofWork .alternate， 


et mext，; 


next = begqinWorKk (CUrEenty，，unitoOofWorKk，， subta 
unitoftWork .memoizedqProps = unitofWork.Pend: 
If (next === mulL1L) 1{ 


// 如 果 没 有 派生 出 新 的 节点 ， 则 进入 comp1leteWork 
CompleteUnitofWork (unitOofWork) ; 
} else { 


WOrKIDPFrOogress = mext， 


主意 : 在 对 比 更 新 过 程 


ee 一 unitofwork.alternate; 不 为 null, 后 


续 的 调用 逻辑 中 会 大 量 使 用 此 处 传 入 的 current. 


探寻 


阶段 beginWork 


bedginWork (CuUrtent，unitofWork，，， subtreeRenderLanes ) 


码 地址 ). 


function beginNWork ( 
curzent: Fiber | null1， 
WOLTKInProdress: ERibperyv 
zendqerLanes: Lanesy， 
下 Ri 
const updateLanes = WOTKIDProdgress .anes，; 
If (Current 1!== mul1L) { 
人 重 进 六 双 屿 


Gemse 旺 Gil 人 hi 


CUrrent .memolizeaqProps， 


Const newProps WOLTKIDnPEogtress .PendqingPai 

ae 二 人 
GeiEasoes 有 一 王 和 eWEms@eS 中 
hasegacyeenkeexecEhnanogeos 亿 | 
(DEV _ ? WorkInPProdgress .本 ypPe != 二 CULEI1 

) 呈 | 
QidReceiveUpdate = 七 TUe， 

} else if (1!1includqesSomeLane (fenaQaerLanes， 
// 当前 泻 染 优先 级 fendqezrLanes 不 包括 fipber.1a 
QidqReceliveUpdate = false'; 

Sweetecinae( 
WOLrKIDPProgress .tad 


// switch 语句 中 包括 context 相 关 罗 辑 ， 本 
) 国 | 


// 当前 fibez 节 点 无 需 更 新 ， 调 用 bailoutonA1li 


zetutrn bailoutoOonAlLreadyEinishedqWork (cui 


】 
// 余下 逻辑 与 初次 创建 共用 
// 1. 设置 workInProgress 优 先 级 为 NoLanes (最 高 似 
WOLTrKInProdgress. lanes = NoLanes，; 
// 2. 根据 workInProgress 节 点 的 类 型 ， 用 不 同 的 方 ; 
SVWaneclgE( 
workInProgress.tag // 只 列 出 部 分 case 
内 
case ClassCompPonent : { 
Const Component = WOTrKIDPProgress .ype，; 
Const unresolvedqProps = WOrKIDProgress 
Const resolvedqProps := 
WOLTKInProdgress .elementIype === Compor 
2? unresolvedProps 
zeSolLlV7eDefaultProps (CompPonent ， UIi 
zetutrn updateClassComponent ( 
Cente 
woOrKInDPProdgressy 
CompPonenty， 
zeSolvedqPropPsy 
CenadqerLanesy 
刀 


CasSse HostRocot : 


zeturn updqateHostRocot (Curent，， worKInPa1 
Case HostComPponent : 

zeturn updqateHostComponent (currenty， woi 
CasemHoesehe 妆 : 

zeturn updqateHostText (CUFTent，， worKInPa1 
case ERragment : 


zetutrn updateFragdment (CUFLEent，， worKInPa1 


bailout 远 辑 {fbailout} 


Dai1l out 碳 文 短语 翻译 为 解救 ， 纾 困 , 在 源码 


中 ,bailout 用 于 判断 子 树 节 点 是 否 完全 复 用 ， 


如 果 可 以 复 用 , 则 会 略 过 fiber 树 构 造 . 


与 初次 创建 不 同 , 在 对 比 更 新 过 程 中 , 如 果 是 老 节点 , 那 
么 current !== nul1, 需要 进行 对 比 , 然后 决定 是 否 


复 用 老 世 点 及 其 子 树 ( 即 bailout 远 辑 ). 


八 


!includesSomeLane (renderLanes，updateLanes) 这 
个 判断 分 文 , 包含 了 泻 染 优先 级 和 upadate 优 先 级 

的 比较 (详情 可 以 回顾 fiber 树 构造 (基础 准备 ) 

中 优先 级 相关 解读 ), 如 果 当 前 节点 无 需 更 新 , 则 

会 进入 bailout 逻 辑 . 


2. 最 后 会 调用 bailoutonaAlreadyFinishedWork: 


。 如 果 同 时 满 
足 !includqesSomeLane (rendqerLanes， WOLTKInPI 
表明 该 fiber 万 点 及 其 子 树 都 无 需 更 新 , 可 
直接 进入 回溯 阶段 (completeUnitofwork) 

。 如果 不 满 
足 !includqesSomeLane (rendqerLanes， WOLTKInPI 
意味 着 子 节 点 需要 更 新 ，clone 并 返回 子 
节点 . 


// 省 略 部 分 无 天 代码 
function bailoutonAlLreadqyEFinishedqWNWorkKk ( 
Cun ES |TDOIR 
WOLTKInProdgtress: ERibper， 
zendqerLanes: Lanesyv 
ENEESNGeEas 1 同人 
If (1!1includqesSomeLane (enaqetrLanes，， WwWorKInPI1 
// 泻 染 优先 级 不 包 插 workInProgress .childLan 


aseUDaoa ob 


} else { 
// 本 fibezr 虽 然 不 用 更 新 ， 但 是 子 节点 需要 更 新 .cl 
ClLonechildqFipers (Curtrent， worKkInProdress ) 


ae Se 人 


注意 : clonechildaFibers 内 部 调 

用 createworkIinProgress, 在 构造 fiber 节 点 时 会 优 
先 复 用 workInProgress.alternate( 不 开辟 新 的 内 
存 空 间 ), 否则 才 会 创建 新 的 fiber 对 象 . 


updateXXX 改 | 数 


updateXXX 晤 数 (如 : updateHostRoot， 
updateClassComponent 等 ) 的 主干 逻辑 与 初次 构造 

过 程 完全 一 致 , 总 的 目的 是 为 了 向 下 生成 子 节 点 , 并 

在 这 个 过 程 中 调用 *econcilechilaren 调 和 函数 , 只 

要 fiber 节 点 有 副作用 , 就 会 把 特殊 操作 设置 

到 fiper.flags 

(如 :节点 *ef,class 组 件 的 生命 周期 ,function 组 件 的 hook, 节 点 删 


等 ). 


对 比 更 新 过 程 的 不 同 乙 处 : 


1. bailoutonRAlreadyFinishedWork 


人 无 需 更 新 
(如 : class 类 型 的 节 
公 


站 Se 回 false)， 到 


再 次 进入 bailout 逻 辑 . 
3: reconcilechildren 调 和 上 因数 


。 调和 函数 是 updaatexxx 范 数 中 的 一 项 重要 
逻辑 , 它 的 作用 是 向 下 生成 子 世 点 , 并 设 
置 fiber.flags. 

。 初次 创建 时 fibez 忆 点 没有 比较 对 象 , 所 以 
在 向 下 生成 子 节点 的 时 候 没有 任何 多 余 的 
逻辑 , 只 管 创 建 就 行 . 

。 对 比 更 新 时 需要 把 ReactElement 对 象 
与 日 fiber 对 象 进行 比较 , 来 判断 是 否 需要 
复 用 旧 fiber 对 象 . 


注 : 本 节 的 重点 是 fiber 树 构造 , 在 对 比 更 新 过 程 

中 reconcilechildqren() 函 数 实 现 的 aiff 算 法 十 分 重 
要 , 但 是 它 只 是 处 于 算法 层面 , 对 于 diff 算法 的 实现 ， 
在 React 算法 之 调和 算法 中 单独 分 析 . 


本 只 需要 先 了 解 调 和 函数 目的 : 


1. 给 新 增 ,移动 ,和 删除 节点 设置 fiber.flags( 新 
增 ,移动 : Placement, 删除 : peletion) 

2. 如 果 是 需要 删除 的 fiper, 除了 自身 打 
上 peletion 之 外 , 还 要 将 其 添加 到 父 节 点 


的 effects 链 表 中 (正常 副作用 队列 的 处 理 是 


在 completework 了 图 效 , 但 是 该 万 点 (被 删除 ) 会 脱 
Ra 
以 在 beginwork 阶 段 提 前 加 入 副作用 队列 ). 


回溯 阶段 completeWork 


completeUnitofWork (unitOfNWork) 函数 (源码 地 址 ) 
在 初次 创建 和 对 比 更 新 逻辑 一 致 ， ee 
阶段 已 经 创建 出 来 的 fiber 节点 , 最 后 创建 (更 
新 )DOM 对 象 , 并 上 移 副 作用 队列 . 


在 这 里 我 们 重点 关注 completework 国 数 
中 ，current !== _ null 的 情况 : 


// .. .省 略 无 关 代码 
function completeWork ( 
EU 
WOLTKInProdgress: REiper， 
zendqerLanes: Lanesy 
二 
Const newProps = WOTrKInProdgtress .PendqingProtk 
Switch (workInProgress.tag) { 
casSse HostComponent : 1{ 
// 非 文 本 节点 


PoPHostContext (WwWOFKInPrOogress) ， 


Const LrcootContainerInstance = detRocotH 


Const type = WOrKIDPProdgress .七 YPe，; 

IE (Current !== nulL1lL && WorkInProdgress ， 
// 处 理 改动 
updateHostComponent ( 


CULTIent， 
woOrKInProdgressy 
廿 YPev 
newPLrOPS， 
cootContainezrInstancey 
) ;7 
IE (CuUrtent .ref 【== WOLTKIDPTrodgress .Tt 
markRef (woOFrKIDPPEogress) ; 
} 
} else { 
// .. .省 略 无 关 代 码 
} 
人 ES 人 和 中间 时 
} 
Case HostText : 1{ 

// 文本 节点 

Const mewIext = mewProPps， 

IE (CuUrtent && WorKInProgress .stateNod 
Const olLdqText = CUTTent .memolizeQqPLFOPD: 
// 处 理 改 动 
UpdateHostText (CUrLent，，， WOLKInDPEOGEes 


} else { 


// .. .省 略 无 关 代 码 


} 


SEEDGi0oD 辐 攻 2 


UpdateHostComponent = function ( 


GUFeETD te 

WOLTKInProdgress: ERiper， 

tyPe: TIYPev 

MeWESSGIS Ges 
OOEGGRSanee ms 区 aee 王 @GEaanee 


{ 


Const olLldqProps = Curtent .memoizedqProps:， 
If _ (oldqProps === mnewProps) { 
Eetuzcnmny， 
} 
Const instance: Instance = WOLTKInPLrodress .: 
Const CuUrtrentHostContext = getHostContexXxt ( ) 


const updatePayload = PrepareUpaqate ( 
1Instancey 
七 YPev 
GilicliBasolos 
DewPEopPs， 
cootContainezInstancey 


CULTLTentHoSstContexXtyv 


) ;7 
WOLFrKIDPProdgress.updateQueue = (updatePay1 oa 
// 如 果 有 属性 变动 ， 设 置 fiber.flags |= Update， 
If _ (updatePay1load) { 
markUpdate (worKIDPProgress) ; 
】 
} ; 
updateHostText = function ( 
CUTTent : Elipbperv 
WOTrKInProdress: PEipbper， 
Ga 亚 E 攻 SSG 
newTIText : StLrindyv 
) 
// 如 果 有 属性 变动 ， 设置 fiber.flags |= Update， 
If (olLladqText 1!== mnewTIText) { 


markUpdate (worKInPProgress) ; 


] ; 


可 以 看 到 在 更 新 过 程 中 , 如 果 DOM 属性 有 变化 , 不 
会 再 次 新 建 DOM 对 象 , 而 是 设 
置 fiber.flags | = Update, 等 待 commit 只 段 处 理 


(源码 链接 ). 


针对 本 节 的 示例 代码 , 将 整个 fiber 树 构造 过 程 表示 
出 来 : 


构造 前 : 


在 上 文 已 经 说 明 , 进入 循环 构造 前 会 调 
用 prepareFreshstack 刷 新 材 帧 , 在 进入 fibezr 树 构造 
循环 之 前 , 保持 这 这 个 初始 化 状态 : 


fiber 本 内 存 结构 (构造 循环 之 前 ) 


1 ”后面 大半 此 处 连 络 | 
| [2 


Poem -一 


fiber 彬 2( 内 存 虽 


fiber 树 1 们 前 页 面 


performUnitOfWork 第 1 次 调用 (只 执行 beginwork): 


执行 前 : workInProgress 指 

向 HostRootFiber.alternate 对 象 ， 此 

时 current 三 workInProgress.alternate 指 
向 当前 页 面 对 应 的 fiber 树 . 

。 执行 过 程 : 


O 因为 current !== null 且 当前 节 
点 fiber.lanes 不 在 泻 染 优先 级 ; 泄 围 内 ， 故 
进入 bailoutonalreadyFinisheqWork 远 
辑 

〇 O 又 因为 fiber.childqLanes 处 于 泻 染 优先 级 
范围 内 , 证 明 -nhild 节 点 需要 更 新 , 克 
隆 workIinProgress .child 世 点 . 

〇 O clone 之 后 ， 新 fiber 节 点 会 于 弃 旧 fiber 上 
的 标志 位 (flags) 和 副作用 (effects), 其 他 
属性 会 继续 保留 

到 执行 后 : 返回 被 clone 的 下 级 节 

点 fiber (<App/>), 移动 vorkInpProgress 指 向 


子 节 点 fiber (<ApPp/>) 


Tiber 酝 内 存 结构 (构造 扩 环 ) 


vondnPraogrssaRootRendarLaneg = 
aubseRendarLanes 二 


RE ee 
Eee / 
aernate 3 
RE ee 
= 一例 PE Tappe ) 
sarat 于 
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| 让 癌 
| 和 | 
1 人 tm 
ER <Ap> 医 本 -一 <App> | Ce 
2 
ao emp 
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ad 
Se 
0 
id 
{ <Headar> 上 | button 上 hv 
和、 区 N 
ao 
Eee 
( p 
ioae ahoaa ahode aoae ho 
Ce 本 和 Ca 本 人 
bar 所 2( 央 存 史 fiber 皇 1 倍 前 面 | 


[ 
1 


performUnitOfWork 第 2 次 调用 (只 执行 beginwork): 


息 执行 前 : workInProgress 指 加 fiber (<APP/>) 
蔬 氮 ， 


且 current 三 workInProgress.alternate 有 


值 


GO 当 前 节点 fiber 2 lanes 处 于 泻 染 优先 级 泄 围 
内 ， 会 进入 updqateclasscomponent () 组 数 
GO 在 updqateclassCcomponent () 级 数 中 ， 调 


用 r*econcilechildqren () 生成 下 级 子 节点 . 


。 执行 后 : 返回 下 级 节点 fiber (<Heaqer/>) ， 移 
动 workIinProgress 指 回 子 节 


局 fliper (<Headqer/>) 


fber 权 内存 绪 柏 (构造 循 环 } 


worknProgress 


1 
AR 
fiber 本 1( 当 前 页 面 ) 
| 


fiber 柄 2 内 存 叶 


performUnitofWwork 第 3 次 调用 (执行 beginWork 


和 completeUnitofNwork): 
后 beginwork 执 行 前 : WOLTKInPLrodgres s 指 


向 fiber (<Headqer/>)， 
WOTKInPFrOGress .alternate 有 


且 current 


值 


。 beginwork 执 行 过 程 : 


O 〇 O 当前 节点 fiber.Llanes 处 于 泻 染 优先 级 范围 
内 ,会 会 进入 updateclasscomponent 全 级 数 
国 在 updateclasscomponent () 医 级 数 中 ， 由 于 
此 组 件 
是 PureCcomponent， shouldcomponentUpdate 判 
定 为 false, 故 进 
入 bailoutonAlreadqyEinishedWork 远 辑 . 
〇 又 因为 fiber.childLanes 不 在 泻 染 优先 级 
范围 内 , 证 明 chila 节 点 也 不 需要 更 新 
。 beginwork 执 行 后 : 因为 完全 满足 pailout 逻 辑 ， 
返回 nul1. 所 以 进 
入 completeUnitofwork (unitOofWork) 芷 级 数 ， 传 
入 的 参数 unitofwork 实 际 上 就 
是 workInProgress( 此 时 指 


向 fiber (<Header/>)) 


er 相 内 存 结 检 { 相 造 各 环 ) 


ber 和 2( 内 存 叶 fiber 树 1 人 前 页 而 | 


到 completeUnitofwork 执 行 
前 : workInProgress 指 加 fiber (<Headqer/>) 
completeUnitofwork 执 行 过 程 : 


以 fiber(<Header/>) 为 起 点 , 向 上 回溯 
completeUnitofWwork 第 1 次 循环 : 


1. 执行 completework 国 数 : class 类 型 的 组 件 无 
需 处 理 . 

2. 上 移 副 作用 队列 : 由 于 本 节点 fiber (header) 没 
有 副作用 (fiber.flags = 0), 所 以 执行 之 后 副 


作用 队列 没有 实质 变化 (目前 为 空 ). 
3. 向 上 回溯 : 由 于 还 有 兄弟 节点 ， 
把 workIinProgress 指 回 下 一 个 兄弟 节 


点 fiber (button), 退出 completeUnitofWork. 


存 循环 ) 
earind workinPragressRoot 一 一 一 
2 ar de 
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辽 多 宙 < 
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本 
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performUnitOofNwork 第 4 次 调用 (执行 bsginwork 


和 completeUnitofwork): 


beginwork 执 行 过 才 程 : 调 


用 upqateHostcomponent 


O 〇 本 示例 中 button 的 子 节点 是 一 个 直接 文本 
节点 ,设置 nextChildren = null( 源 码 注释 的 
解释 是 不 用 在 开辟 内 存 去 创建 一 个 文本 书 
点 , 同时 还 能 威 少 向 下 遍历 ). 

〇 由 于 nextchildqren = null, 经 
过 r*econcilechildqren 阶 段 处 理 后 , 返回 


值 也 是 nul1 


。 beginWork 执 行 后 : 由 于 下 级 节点 为 null, 所 以 
进入 completeUnitOofNWork (unitOfWorK) 级 数 ， 
传 入 的 参数 unitofwork 实 际 上 就 
是 workInProgress( 此 时 指向 flipex (Dutton) 节 


局 ) 


昌 completeUnitofwork 执 行 过 程 : 


以 fiber (button) 为 起 点 , 向 上 回 漳 
completeUnitOofWwork 第 1 次 循环 : 
1 . 执行 completework 吨 数 


。 因为 fiber (button) .stateNoqde != nul1， 
所 以 无 需 再 次 创建 DOM 对 象 . 只 需要 进 
一 步调 用 updaateHostcomponent () 记录 
DOM 属性 改动 情 . 


。 在 updqateHostcomponent () 函数 中 , 又 因 
为 oldqProps ===_ newWPLroPps， 所 以 无 需 记 
录 改 动情 况 , 直接 返回 
4. 上 移 副 作用 队列 : 由 于 本 节点 fiber (button) 没 
有 副作用 (fiber.flags = 0), 所 以 执行 之 后 副 
作用 队列 没有 实质 变化 (目前 为 空 ). 
5. 向 上 回溯 : 由 于 还 有 兄弟 节点 ， 
把 werkInProgress 指 向 下 一 个 兄弟 节 


点 fiber (QiV) ， 退出 completeUnitOofWork， 


fber 棋 内 存 结 栓 (构造 循 环 ) 


ber 机 2[ 内 存 中 ) 


performUnitOofWork 第 5 次 调用 (执行 bseginwork): 


本 执行 前 : workInProgress 指 向 fiber (QivV) 节点 ， 


且 current 一 workInProgress.alternate 有 


值 


〇 O 在 upaateHostcomponent () 图 数 中 , 调 
用 reconcilechildren() 生 成 下 级 子 节点 . 

〇 需要 注意 的 是 , 下 级 子 节 点 是 一 个 可 和 代 
数组 , 会 把 fiber.childq.sibling 一 起 构 
迄 出 来 , 同时 根据 需要 设置 fiber.flags. 
在 本 例 中 , 下 级 世 点 有 被 删除 的 情况 , 被 删 
除 的 节点 会 被 添加 到 父 节 点 的 副作用 队列 
中 (具体 实现 方式 请 参考 React 算法 之 调和 
算法 ). 

。 执行 后 : 返回 下 级 节点 fiber(p), 移 


动 workInProgress 指 向 子 节 点 fiber (P) 


performUnitofWwork 第 6 次 调用 (执行 bseginWork 


和 completeUnitofNwork): 


。 beginWork 执 行 过 程 : 与 第 4 次 调用 中 构 
建 tiber (button) 的 逻辑 完全 一 致 , 因为 都 是 直 
接 文 本 节点 ，reconcilechildqren () 返 回 的 下 
级 子 世 点 为 nul. 


beginwork 执 行 后 : 由 于 下 级 节点 为 nul1， 所 以 


进入 completeUnitofWork (unitOofWork) 四 数 


。 completeUnitofwork 执 行 过 程 : 以 fiber (P) 为 


起 点 , 向 上 回 浏 
completeUnitofWwork 第 1 次 循环 : 
放 执行 completework 吨 数 


。 因 为 fiber(p) .stateNode != null1, 所 以 
无 需 再 次 创建 DOM 对 象 . 
在 updateHostcomponent () 图 数 中 , 又 因 
为 万 点 属性 没有 变动 , 所 以 无 需 打 标记 
3. 上 移 副 作用 队列 : 本 蔬 点 fiber(p) 没 有 副作用 
(fiber.flags = 0). 
4. 向 上 回溯 : 由 于 还 有 兄弟 万 点 ， 
把 workInProgress 指 向 下 一 个 兄弟 节 


点 fiber 人 退出 completeUnitofWwork. 
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performUnitofWwork 第 7 次 调用 (执行 beginwork 


和 completeUnitofwork): 


。 beginWork 执 行 过 程 : 与 第 4 次 调用 中 构 
建 tiber (button) 的 逻辑 完全 一 致 , 因为 都 是 直 
接 文本 节点 ，reconcilechildqren() 返 回 的 下 
级 子 万 点 为 nul. 


beginwork 执 行 后 : 由 于 下 级 节点 为 nul1， 所 以 


进入 completeUnitofWork (unitOofWork) 四 数 


。 completeUnitofwork 执 行 过 程 : 以 fiber(p) 为 


起 点 , 向 上 回 浏 
completeUnitofWwork 第 1 次 循环 : 
放 执行 completework 吨 数 : 


。 因为 fiber(p) .stateNode != null, 所 以 
无 需 再 次 创建 DOM 对 象 . 
在 updaateHostcomponent () 图 数 中 , 又 因 
为 节点 属性 没有 变动 , 所 以 无 需 打 标记 


3. 上 移 副 作用 队列 : 本 万 点 fiber (p) 有 副作用 
(fiber.flags = Placement)， 需要 将 其 添加 到 


父 忆 点 的 副作用 队列 之 后 . 


4. 向 上 回溯 : 由 于 还 有 兄弟 节点 ， 
jurkrnpxoUress 指 向 下 一 个 兄弟 节 


点 fiber (P) ， 退出 completeUnitofWwork. 


atdnPingressFoctRandanLanes =NioLenes 
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performUnitOofNwork 第 8 次 调用 (执行 beginwork 


和 completeUnitofwork): 


9 beginWwork 执 行 过 才 程 : 本 节点 fiber(p) 是 一 个 新 
增 节点 ， 其 current ===_ muUl1， 会 进 
入 updateHostCcomponent () 区 吨 数 . 因为 是 直接 文 


本 节点 ， reconcilechildqren() 退 反 回 的 下 级 子 
点 为 nul. 


beginWwork 执 行 后 : 由 于 下 级 节点 为 nul1， 所 以 


进入 completeUnitofNWork (unitOofWorkKk) 吸 数 


。 completeUnitofwork 执 行 过 程 : 以 fiber(p) 为 


起 点 , 向 上 回溯 
completeUnitofWwork 第 1 次 循环 : 


1. 执行 completework 图 数 : 由 于 本 万 点 是 一 个 新 
增 节 点 , 且 fiber (p) .stateNode === nul1, 所 
以 创建 fiber (p) 节点 对 应 的 poM 实 例 , 挂 载 
到 fiber.stateNode 之 上 . 

2. 上 移 副 作用 队列 : 本 节点 fiber (p) 有 副作用 
(fiber.flags = Placement), 需要 将 其 添加 到 
父 忆 点 的 副作用 队列 之 后 . 

3. 向 上 回溯 : 由 于 没有 兄弟 节点 ， 

把 werkIinProgress 指 针 指 向 父 节 


点 fiber(dqiv)， 
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completeUnitOofWwork 第 2 ， 欠 循 环 : 


1. 执行 completework 明 数 : 由 于 div 组 件 没 有 属性 
变动 ， 故 updateHostCcomponent () 没有 设置 副 作 
用 标记 

2. 上 移 副 作用 队列 : 本 节点 fiber (div) 的 副作用 
队列 添加 到 父 己 点 的 副作用 队列 之 后 . 

3. 向 上 回溯 : 由 于 没有 兄弟 节点 ， 


把 workInP ECOodqresS s 指 针 指 向 父 节 
点 fiber (<APP/>) 


completeUnitofWwork 第 3 次 循环 : 


1. 执行 completework 图 数 : class 类 型 的 节点 无 需 
处 理 

2. 上 移 副 作用 队列 : 本 万 点 fiber (<aApp/>) 的 副 作 
用 队列 添加 到 父 节 点 的 副作用 队列 之 后 . 

3. 向 上 回溯 : 由 于 没有 兄弟 节点 ， 
把 werkIinProgress 指 针 指 向 父 节 


点 fiber (HoSstRootEiber) 
completeUnitofWwork 第 4 次 循环 : 


1. 执行 completework 国 数 : HostRoot 类 型 的 节点 
无 需 处 理 

2. 向 上 回溯 : 由 于 父 书 点 为 空 , 无 需 进 入 处 理 副 作 
用 队列 的 远 辑 . 最 后 设 
置 wvorkInpProgress=null, 并 退 
出 completeUnitOofWork 


8: 重 置 fiber .ChildqLanes 


到 此 整个 fibezr 树 构造 循环 (对 比 更 新 ) 已 经 执行 完毕 ， 
拥有 一 棵 新 的 fiber 树 , 并 且 在 fiper 树 的 根 万 点 上 挂 


载 了 副作用 队列 . *endqerRootsync 图 数 退 出 之 前 , 会 
重 置 workInProgressRoot = _ null, 表明 没有 正在 进 
行 中 的 *enaer. 且 把 最 新 的 fiber 树 挂 载 

到 fiberRoot .finishedwork 上 . 这 时 整个 fiber 树 的 
内 存 结 构 如 下 (注意 fiberRoot .finishedWork 


和 fiperRocot . current 指 针 , 在 commitRoot [ 价 段 会 进 


行 处 理 ): 


ee 


站 -sehadn- -eaee ] 


mex24 和 中 er 本 页 本 | 


无 论 是 初次 构造 或 者 是 对 比 更 新 , 当 fiber 树 构造 完成 之 
后 , 余下 的 逻辑 几乎 一 致 , 在 fiber 树 这 染 中 继续 讨 


本 节 演 示 了 更 新 阶段 fiber 树 构造 (对 比 更 新 ) 的 全 部 
过 程 , 跟踪 了 创建 过 程 中 内 存 引 用 的 变化 情况 . 

与 初次 构造 最 大 的 不 同 在 于 fiber 节 点 是 否 可 以 复 用 ， 
其 中 bailout 罗 辑 是 fiber 子 树 能 否 复 用 的 判断 依据 . 


fiber 树 演 染 


原文 : https:Wgithub.com/7kms/react- 


川 ustration-series/blob/main/docs/main/ 
fibertree-commit.md 


title 
fiber 树 泻 染 


在 正式 分 析 fiber 树 泻 染 之 前 , 再 次 回顾 一 下 
reconciler 运作 流程 的 4 个 阶段 : 


renderRootConcurrent 
performSyncWorkOnRoot performConcurentWorkOnRoot | 
执行 task 回 调 
全 fiber 袜 相 汉 
铭 
2 -scheduleUpdateonFiber ensureRootlsScheduled 


Scheduler 
> 


注册 调度 task wonaoop 
| 任务 调度 


下 输入 阶段 : 衔接 react-dqom 包 ， 承接 fibpezr 更 新 请 


求 (参考 React 应 用 的 启动 过 程 ). 

2. 注册 调度 任务 : 与 调度 中 心 (scheduler 包 ) 交 互 ， 
注册 调度 任务 task, 等 待 任 务 回调 (参考 React 
调度 原理 (schedulem)). 

3. 执行 任务 回调 : 在 内 存 中 构造 出 fiber 树 和 DoM 
对 象 (参考 fiber 树 构造 (初次 创建 ) 和 fiber 树 构 


造 (对 比 更 新 )). 
4. 输出 : 与 泻 染 器 (zeact-dom) 交 互 ， 泻 染 DoM 节 点 . 


丁 分 析 其 中 的 第 4 阶段 (输出 )，fibez 树 泻 染 处 

于 reconciler 运作 流程 这 一 流水 线 的 最 后 一 环 , 或 
者 说 前 面 的 步骤 都 是 为 了 最 后 一 步 服务 , 所 以 其 重要 
性 不 言 而 喻 . 


前 文 已 经 介绍 了 fipber 树 构造 , 现在 分 析 fipezr 树 泻 染 
过 程 , 这 个 过 程 , 实际 上 是 对 fiber 树 的 进一步 处 理 . 
fiber 树 特 点 


通过 前 文 fibezr 树 构造 的 解读 , 可 以 总 结 出 fiber 树 的 
基本 特点 : 


。 无 论 是 首次 构造 或 者 是 对 比 更 新 , 最 终 都 会 在 内 存 
中 生成 一 棵 用 于 泻 染 页 面 的 fiber 树 


( 即 fiberRoot .finishedqWork). 


。 这 棵 将 要 被 泻 染 的 fiber 树 有 2 个 特点 : 


1. 副作用 队列 挂 载 在 根 万 点 上 (具体 来 讲 
是 finisheqWork .firstEffect) 

2. 代表 最 新 页 面 的 poM 对 象 挂 载 在 fiber 树 中 
首 个 Hostcomponent 类 型 的 节点 上 (具体 来 
讲 poM 对 象 是 挂 载 在 fiber. stateNode 属 性 
了 


这 里 再 次 回顾 前 文 使 用 过 的 2 棵 fiber 树 , 可 以 验证 
上 述 特点 : 


1. 初次 构造 


AR 
Class 
dnstance 
div 
AAA 


了 er 树 2( 内 存 中 ) fiber 树 1( 当 前 页 面 , 首次 构造 ,页面 未 浑 染 ) 


1. 对 比 更 新 
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整个 泻 染 逻 辑 都 在 commitRoot 函数 中 : 


EUmeticnEEeommnaeRoow(cctao)| 
Const LrcendqerPriorityLevel = getCurrentLPLziosil 
1 全 人 让 疾 本 的 eaEEOiSnE 
ImmedqiateSchedulerPriorityv 


GemnmieRoctrnnolesonaiknD 下 天天 全 站 加 ezPTL: 


) 7 


zeturn Pul1，; 


在 commitRoot 中 同时 使 用 到 了 演 染 优先 级 

和 调度 优先 级 , 有 关 优 先 级 的 讨论 , 在 前 文 已 经 做 出 了 
说 明 ( 参 考 React 中 的 优先 级 管理 和 fiber 树 构 造 ( 基 
础 准备 )# 优 先 级 ), 本 万 不 再 性 述 . 最 后 的 实现 是 通 


过 commitRootImp1 胃 | 数 : 


// ... 省 略 部 分 无 关 代 码 


EGGEG 人 有 ee zenaqePLrioritYI 


Const finishedqWNWork = oot .finisheaqNWork，; 


const Lanes = froot .finishedqLanes，; 


// 清空 FiberRoot 对 象 上 的 属性 
xzoot .finishedqWork = mul1，; 
root .finishedqLanes = NoLanes:; 
OotecCalloacKNCGQe = ml 


IE (root === WOTKIDnProgressRoot) { 
// 重 置 全 局 变量 
WOLrKIDPProdgressRocot = nul1l; 


WOrKIDPFrogress = mul1，; 


WOLTrKIDnProdgressRootRenadqerLanes = NoLanes:，; 


// 再 次 更 新 副作用 队列 
虹 全 | 疏 和 全 SS 本 人 人 ec 
If (finisheaqNork .flags > PerformeaQNWork) ({ 
// 默认 情况 下 fibpez 节 点 的 副作用 队列 是 不 包括 自身 上 
// 如 果 根 节点 有 副作用 ， 则 将 根 节 点 添加 到 副作用 队 ; 
If (finishedqNork .LastEffect !== mnul1lL) { 
finisheqWork .astEffect .nextEffect = 工 : 
fixrstEffect = finisheaQqNWork .firstEffect) 
} else { 
firstEffect = finishedqNork，; 
} 
} else { 
firstEffect = finishedqNork .firstEffect， 


et firstEffect = finisheQqWNWorKk .frstEffect， 
3 全 二 证 和 SEEI0ESSAEE ER 

Const PrevZEXxXecutionContext = exXxecutioncCor 

executionContext |= CommitContext:; 

// 阶段 1: qdqom 突 变 之 前 

nextEffect = firstEffect， 

ea | 

commitBeforeMutationEffects () ; 
} while (nextEffect !== mulL1) ，; 


// 阶段 2: dom 突 变 ， 界 面 发 生 改 变 
nextEffect = firstEffect， 


le | 
CommitMuUtationEffects (oot，，LrenaqerPrioail 
} while (nextEffect !== mulL1) ，; 


// 恢复 界面 状态 


resetAftezcCommit (oot .ContainerInfo) ，; 
// 切换 current 指 针 


xzoot .CuUrrent = finishedqNork，; 


// 阶段 3: Layout 阶 段 ， 调 用 生命 周期 componentD 
nextEffect = firstEffect，; 
所 二 | 
人 Ginmiit 攻 SayYGO 吕 ER EECESLECCIEAEIIETmD ES E 
} while (nextEffect !== mnulL1) ，; 
DextEffect = mnul1l，; 


exXxecutionContext = PreVExecutionContext ，; 


------------ 泻 染 后 : 重 置 与 清理 -----+----- 


If (zxootDoesHavePassiveEffects) 1{ 


由 
中 中 


// 有 被 动作 用 (使 用 useEffect) ， 保 存 一 些 全 局 变 


} else { 


/ 分 解 副 作用 队列 链表 ， 辅助 垃圾 回收 
， 如 果 有 被 动作 用 (使 用 useEffect) ， 会 把 分 解 操作 
mexXtEffect = firstEffect， 
while (nextEffect !== nullL) { 


CoOnst TDPnextNextEffect = mexXtEffectl .nexXti 

nextEffect .nextEftfect = Dul1，; 

If _ (nextEffect.flags & Deletion) |{ 
QqetachEibpexrAfterEffects (nextEffect) ，; 


nexXtEffect = mexXxtNeXxtEffect， 


】 

// 重 置 一 些 全 局 变量 (省 略 这 部 分 代码 ) . 

态 下 面 代码 用 于 检测 是 否 有 新 的 更 新 任务 

// 比如 在 componentDidqMount 上 函数 中 ， 再 次 调用 setsSs 


// 1. 检测 常规 (异步 ) 任务 ， 如果 有 则 会 发 起 异步 调度 
enSsureRootISScheduledq (oot，Pnow() ) ; 


// 2. 检测 同步 任务 ， 如果 有 则 主动 调用 flushSyncCa 
fLushSynccCcalLlLpackoueue () ; 


SEE Go aiD 间 国 枚 7 


commitRootImp1 丝 | 吨 数 中 ， 可 以 根据 是 否 调用 泻 染 , 把 


整 个 commitRootImp1 分 了 为 3 段 ( 


分 别 


忆 :证 沈 计 。 :; 定 ; 3 
十 泻 染 前 ， 泻 染 ， 演 染 后 ). 


重 染 前 


为 接 下 来 正式 演 染 , 做 一 些 准 备 工 作 . 主要 包括 : 


1. 设置 全 局 状态 (如 : 更 新 fiberRoot 上 的 属性 ) 
2. 重 置 全 局 变量 

(如 : workInProgressRoot，workInProgress 等 ) 
3. 再 次 更 新 副作用 队列 : 只 针对 根 世 


点 fiberRoot .finisheqWork 


。 默认 情况 下 根 节 点 的 副作用 队列 是 不 包括 
自身 的 , 如 果 根 节点 有 副作用 , 则 将 根 节 点 
深 加 各 到 副作用 队列 的 末尾 

注意 只 是 延长 了 副作用 队列 , 但 
ae 针 并 没有 改 
变 . 比如 首次 构造 时 , 根 节点 拥有 snapshot 
标记 : 


fiber 树 内 存 结构 
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fiber 树 2( 内 存 中 ) fber 树 1( 当 前 页 面 ) 


染 
commitRootImp1 函 数 中 ， 泻 染 阶段 的 主要 逻辑 是 处 
理 副 作用 队列 , 将 最 新 的 DOM 节点 (已 经 在 内 存 中 ， 


只 是 还 没 泻 染 ) 泻 染 到 界面 上 . 


Ab 
| 中 


整个 泻 染 过 程 被 分 为 3 个 图 数 分布 实 现 : 
1. commitBeforeMutationEffects 


。dom 变更 之 前 , 处 理 副 作用 队列 中 带 
有 snapshot,Passive 标 记 的 fiber 节 点 . 


3. commitMutationEftfects 


。dom 变更 , 界面 得 到 更 新 . 处 理 副作用 队 
列 中 市 
有 Placement， Update，Deletion， Hydqrating 标 
记 的 fiber 节 点 . 
5D. commitLayoutEffects 


。 dom 变更 后 , 处 理 副作用 队列 中 举 


有 Upqate callback 标 记 的 fiber 节 点 . 


通过 上 述 源码 分 析 , 可 以 把 commitRootImp1 的 职责 
概括 为 2 个 方面 : 


1. 处 理 副作用 队列 . (步骤 1,2,3 都 会 处 理 , 只 是 处 
理 节 点 的 标识 fiber.flags 不 同 ). 

2. 调用 泻 染 器 , 输出 最 终结 果 . (在 步骤 
2: commitMutationEffects 中 执行 ). 


所 以 commitRootImp1 是 处 

理 fiberRoot .finishedwork 这 棵 即将 被 渔 染 

的 fiber 树 , 理论 上 无 需 关 心 这 棵 fiber 树 是 如 何 产 
生 的 (可 以 是 首次 构造 产生 , 也 可 以 是 对 比 更 新 产生 ). 
为 了 清晰 简便 , 在 下 文 的 所 有 图 示 都 使 

用 初次 创建 的 Eiber 树 结构 来 进行 演示 . 


这 3 个 函数 处 理 的 对 象 是 副作用 队列 和 DoM 对 象 . 


所 以 无 论 fiber 树 结构 有 多 么 复杂 , 到 了 commitRoot 
阶段 , 实际 起 作用 的 只 有 2 个 节点 : 


。 副作用 队列 所 在 节点 : 根 节点 , 即 HostRootFiber 


节点 . 
。 DOM 对 象 所 在 节点 : 从 上 至 下 首 
起 


| HostCcomponent 类 型 的 fibezr 节 点 ， 此 贡 点 
银 fiber. stateNode 实 际 上 指向 最 新 的 DOM 
树 . 


下 图 为 了 清晰 , 省 略 了 一 些 无 天 引 用 , 只 留 
下 commitRoot 阶段 实际 会 用 到 的 fiber 节 点 : 


fiber 树 内 存 结构 


人 
和 s 
dr 
人 > DOM 对 象 ( 首 个 HostComponent) ES 
所 Pr 1<jpy 
ee pr2 cfpr 


全 在 commltRoot 阶 段 
4 无 需 关心 fber 子 树 的 具体 结构 和 


fiber 树 2( 内 存 中 ) fber 树 1( 当 前 页 面 ) 


commitBeforeMutationEffects 


第 一 阶段 : dom 变更 之 前 , 处 理 副作用 队列 中 达 


有 snapshot,Passive 标 记 的 fibper 节 点 . 


// ... 省 略 部 分 无 天 代码 


function commitBeforeMutationEffects() ({ 
while (nextEffect 1!== mul1L) { 
Const CuUTrTent = mextEffect .alternate，; 


Const flags = mextEftfect .flags， 
// 处 理 ` snapshot ` 标 记 
If ((flags & Snapshot) !== NOE1Lagqs) ({ 
CommitBeforeMutat1ionEffectoOonEiper (CULTLE 
} 
// 处 理 `Passive'` 标 记 
If ((flags & Passive) !== NOE1Ladgs) |[{ 
// Passive 标 记 只 在 使 用 了 hook，useEffect 会 
If (!zootDoesHavePassiveEftfects) |{ 
xzootDoesHavePassiveEffects = 七 Tue; 
ScheduleCcal1lpack (NormalSchedulLecrPrioi 
flushPassiveEftfects () ， 
SEOG0 9 有 辣 攻 7 
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】 
DexXtEffect = mexXtEffect .nextEffect， 


注意 : commitBeforeMutationEffectonEFiber 实 际 


上 对 应 了 ccmmitBeforeMutationLifecycles 阳 数 ， 


在 导入 时 进行 了 重 命名 


1. 处 理 snapshot 标 记 


function commitBeforeMutationLifecCcycles ( 
GUEST 下 ENUNUNE 
finishedqNWork: PEipery， 
ERSENAoalielEE| 
Switch (finisheaqNWork .tag) { 
case FunctionComponent : 
Case ForwardRerf : 
case SimpleMemoComponent : 
Case BlLlock: { 
SS 区 
】 
case ClassCompPonent : { 
If (finisheaqNWork .flags & Snapshot) { 


训 CCOSisS NE 二 三 本 DR 人 
Const PrevZProps = CuUrrent .memolizedi 
CoOnSt PreVState = CULTLEent .memoized: 


Const instance = finishedqWorKI. stats 


Const snapshot = instance.getSnapsl 
finishedqWork .elLlementType === 开 1n: 
CEAEeGiS 


reSsolVveDefaultProps (finishedy 


Sesxeieaeee 
) ;7 
Instance. reactInternalLSnapshotBe: 
) 
】 
etuznmy， 


} 
Case HostRoot : { 
下 三 DoaGSERS ENEENESRGTO 
If (finisheaqNWork .flags & Snapshot) { 
Const troot = finishedqNWork .stateNods 


ClLearContainer (root .containecrInfo) ; 


easmg 
} 
Case HostCompPponent : 
GasemesieeEE: 
Gase 王 JSsEBGe 世 aa 本 
case IncompleteClassComponent : 


etaUnsmi 


从 源码 中 可 以 看 到 , 与 snapshot 标 记 相 天 的 类 型 只 


有 clas scComponent 和 HostRoot. 


。 对 于 classcomponent 类 型 节 万 点 ， 调用 

了 instance.gqetsnapshotBeforeUpdate 生 命 
周期 永 数 

。 对 于 HostRoot 类 型 节点 ， 调用 -clearcontainer 
清空 了 容器 节点 ( 即 aiv#root 这 文 个 dom 万 点 ). 


1 处 理 Pas sive 标 记 


Passive 标 记 只 会 在 使 用 了 hook 对 象 的 function 类 
型 的 节点 上 存在 , 后 续 的 执行 过 程 在 hook 原 理 章 节 中 
详细 说 明 . 此 处 我 们 需要 了 解 在 commitRoot 的 第 一 
个 阶段 ， 为 了 处 理 hook 对 象 (如 useEffect)， 通 

过 schedulecallback 单 独 注册 了 一 个 调度 任务 task， 
等 待 调度 中 心 schedquler 处 理 . 


二 通过 调度 中 心 schedqulezr 调 度 的 任务 task 均 是 
通过 Messagechanne1 触 发 ， 都 是 异步 执行 (可 参考 
React 调度 原理 (schedulenm)). 


小 测试 : 


// 以 下 示例 代码 中 的 输出 顺序 为 1，3，4， 2 
交 GNESIKeiniKSSNE 汉 局 ) 央 芭 | 
GOmsoelieechn 人 可 区 
USeEffect (() => { 
GeomsejeRhegR 
}) ;7 
aniSeISEReeR 人 有 
Pomise .resolve(() => 1{ 
Console. lodgq(4) ; 
}) ;7 


returzn <Qiv>test</di>，; 


commitMutationEffects 
第 二 阶段 : dom 变更 , 界面 得 到 更 新 . 处 理 副 作用 队 
列 中 市 


有 contentReset， Ref，P1Lacement，Update，Deletion，HyY 
记 的 fiber 节 点 . 


// .. .省 略 部 分 无 天 代码 
ECGEeonECemnaseMuaieaien 本 eceisi 

EGGt :ReoeROOTEF 

zenaqerPriorityLeve1l: ReactPriorityLevel， 


) 


// 处 理 ReE 
ELaOSSERE 名 证 


Const CuUrtent = mextEffect .alternate，; 


3 


(CUTTent !== mullL) { 


// 先 清 空 ref， 在 commitRoot 的 第 三 阶段 (qom 变 


commitDetachRef (CUurtent ) ; 


// 处 理 DoM 突 变 


While 


(nextEffect !== nul1) { 


Const flags = mextEftfect .flags， 


Const PrimaryFlags = flagqs & (Placement 


SweetiorameanesEaseoS 


Case Placement : { 


】 


// 新 增 节 点 

commitP1lLacement (nextEffect) ， 
nextEffect .flags &= ~Placement; // 注 
Dreak， 


case PlacementAnaqUpdate: { 


// Placement 

commitPlLacement (nextEffect) ， 
nextEffect .flagqs &= ~PLacement， 

// Update 

CoOn st CUTTent = mextEffect .alternate， 
CommitWork (Curent，PnexXxtEffect) ， 


Dreak， 


case Update: { 
// 更 新 节点 
Con st CUTTent = mexXxtEffect .alternate， 
CommitWorKk (CuUCEent ， nextEffect)|: 
Dreak， 


case Deletion: { 
// 删除 节点 
CommitDeletion (oot， nexXtEffect， en 


Dreak， 


】 
DexXxtEffect = mexXxtEffect .nextEffect， 


处 理 DOM 突变 : 


1. 新 增 : 虽 数 调用 栈 commitPlacement - 
> insertOrAppendqPlacementNode - 
> appendqCchild 

2. 更 新 : 级 数 调 用 枝 commitwork - 
> CommitUpdate 

3. 删除 : 级 数 调用 材 CommitDeletion - 


> removeCchilda 


用 appendqchil1d，commitUupdate，removechilq 这 
些 *eact-dom 包 中 的 函数 . 它们 是 aostconfic 协 议 
(源码 在 ReactDOMHostConfig.js 中 ) 中 规定 的 标准 
了 图 数 , 在 泻 染 器 react-adom 包 中 进行 实现 . 这 些 函 数 
就 是 直接 操作 DOM, 所 以 执行 之 后 , 界面 也 会 得 到 
更 新 . 


注意 : commitMutationEffects 执 行 之 后 ， 
在 commitRootImp1 函 数 中 切换 当前 fibez 树 
(z*oot . current 二 finishedqwork), 保 


证 fiberRoot .current 指 向 代表 当前 界面 的 fiber 树 . 


fiber 树 内 存 结构 了 
ee 


wandnprogressRootRenderLanes = 
bireeRenderLanes = 
worklnProgrsss = 过 
orkir Root = mt 
Si 
oo 下 玫 
DPI 
astEYect Te 
一 akernate 
{ 
iext 入 有 stEffect 一 -fags 
也 SS 一 一 napshot 
i 
人 am 
SS 
Re 
了 4 fag ”一 一 
修 2 Re 
全 <App/> 是 Peromn 
油 和 区， Lactntemals 
am 
关 生 
dy 上 
nt 
丛 heazdory haador cyheadery 
pp 
ba pv af 
ido 
rain 下 ga 
< rw A 
帮 Update 
header 上 sbine -( <Content> ] 
\ Perom 
村 六 人 _raactinternal 
statehode 。 cba 0 
”了 上 
haaor 
heazory 
p ang P 
F 平 
atateNode tatehode 
军 漂 
apz | asf 
fiber 树 2 fiber 树 1( 内 存 中 ) 


commitLayoutEffects 
第 三 阶段 : dom 变更 后 , 处 理 副作用 队列 中 闪 


有 Upaate， CalLlLpback， Ref 标 记 的 fiber 节 点 . 


// .. .省 略 部 分 无 天 代码 
人 Dee 本 COmmaiema OnmE 硬 自贡 人 起 枚 Seeee 
(nexXxtEffect !== mnul1l1) 1{ 


EliperRocot， 


While 


人 四 而 S 世 是 入 下 SGS 本 三 基 人 全 天 忆 际 全 下 人 CC 相 丰 下 王 本 S， 

// 处 理 Updaate 和 callback 标 记 

下 人 CEISOSEE US 二 | 攻 CanRioacS 
Const CuUrrent = mextEffect .alternate，; 
CommitLayoutEffectoOonFEiper (oot， CuUrrent 

} 

人 TaoSEESRRS OH 
// 重新 设置 ref 
CommitAttachRef (nextEffect) ， 

】 

nextEffect = mextEffect .nextEffect， 


核心 允 辑 都 


在 commitLayoutEffectonFEiber->commitLifeCcycles 


和 


.省 略 部 分 无 关 代 码 


EGGenECOmnaie EECG7CLES SET 


) 攻 。 


finishedqRoot : FipercrRoot， 
CE ES NUOIR 
finishedqWork : Fiper， 
committedLanes: Lanesy 


NA 


Switch (finisheaqNWork .tag) { 
Case ClassComPponent : { 
Const instance = finishedqWork .stateNodk 
If (finisheaqNWork .flags & Upadate) |{ 
If (Current === mulL1L) 1{ 
// 初次 泻 染 : 调用 componentDidMount 
Instance.componentDidqMount () ; 
} else { 
Conise 昌 ev Gles 下 三 
finishedqWork .elLlementType === 工 1n: 
2?_ Current .memolizedqProps 
reSsolVveDefaultProps (finishedly 
ConsSst PreVState = CUTEent .memoized: 
// 更 新 阶段 : 调用 componentDiqdUpdate 
Instance.componentDiadUpadate ( 
区 验 eNREeeies 
BEevetater 
Instance. reactInternalLSnapshoti 


尹 7 


】 
Const updateQueue: UpdateQueue< 


大 
太 


> | null = (finishedWork.updateQueue: : 
If _ (updateQueue !== nulL1L) { 
// 处 理 updqate 回 调 函 数 如 : this.setState 
commitUpdqateQueue (finishedqWork， updat 


eaesmy 


】 
Case HostComponent : { 
Const :instance: Instance = finishedqNWorl 
If (Current === nul1lL && finishedqNWork . 工 
Const type = finishedqWork .ypPe，; 
Const Props = finishedqWork .memoizedPi 
// 设置 focus 等 原生 状态 
commitMount (Instance，typPpe， Props， 工 : 


} 


zetuzmny， 


在 <ommitLifecycles 国 数 中 : 


相 对 于 classcomponent 节 点 , 调用 生命 周期 胃 
数 componentDidqMount 或 componentDidqUpdate， 
调用 updaate.callpback 回 调 函 数 . 

对 于 Hostcomponent 节 点 , 如 有 update 标记 , 需 
要 设置 一 些 原 生 状 态 (如 : focus 等 ) 


泻 染 后 


执行 完 上 述 步骤 之 后 , 本 次 演 染 任务 就 已 经 完成 了 . 


在 泻 染 完 成 后 , 需要 做 一 些 重 置 和 清理 工作 : 


1. 清除 副作用 队列 


。 由 于 副作用 队列 是 一 个 链表 , 由 于 单 
个 fiber 对 象 的 引用 关系 , 无 法 被 gc 回收 . 
。 将 链表 全 部 拆 开 , 当 fiber 对 象 不 再 使 用 的 


时 候 , 可 以 被 gc 回收 . 


fpber 树 内 存 结构 


workdh psi NoLanes 
treeRei =Ia 


workinProgressRoot = nu 


LANNA 由 
Update pcate SS 1 
SA se 
Perform Farm 7 2 从 
RN <App> 
法 : 只 是 将 链表 拆 证 了 . 真正 go 回 和 ， 人 2 
收录 发 生 在 更 新 阶段 国 
到 
和 
( mm 
div 六 ~-~ 
N atewoae > 二 四、 
ee headierr hasder </hender 
peip> 
pz2<fpr 
dr 
省 略 无 关节 点 
fber 机 2 全 er 树 1( 内 存 中 
岂 
| 
二 
四 
川中 


1. 检测 更 新 


。 在 整个 演 染 过 程 中 , 有 可 能 产生 新 
的 upaate( 比 如 在 -componentDidMount 卫 数 
中 , 再 次 调用 setstate () ). 

。 如 果 是 常规 (异步 ) 任 务 , 不 用 特殊 处 理 , 调 
用 snsureRootIsscheduled 确 保 任 务 已 经 
注册 到 调度 中 心 即 可 . 

。 如 果 是 同步 任务 , 则 主动 调 
用 flushsynccallbackoueue( 无 需 再 次 等 
待 scheduler 调度 ), 再 次 进入 fiber 树 构造 
循环 


// 清除 副作用 队列 
If (footDoesHavePassiveEffects) { 
// 有 被 动作 用 (使 用 useEffect) ， 保 存 一 些 全 局 变量 
} else { 
// 分 解 副 作用 队列 链表 ， 辅助 垃圾 回收 . 
// 如 果 有 被 动作 用 (使 用 useEffect) ， 会 把 分 解 操 作 放 
nextEffect = firstEffect， 
while (nextEffect !== nul1l) { 
CoOn st TDPnextNeXxtEffect = meXtEffect .nexXxtEEE1: 
DextEffect .nextEftfect = null，; 
If _ (nextEffect.flags & Deletion) 1{ 
QetachEiperAfterEffects (nextEffect) ， 


】 
nexXxtEffect = mnexXxtNeXxtEffect， 


】 

// 重 置 一 些 全 局 变量 (省 略 这 部 分 代码 ) . . . 

人 下 面 代码 用 于 检测 是 否 有 新 的 更 新 任务 

// 比如 在 componentDidqMount 了 因数 中 ， 再 次 调用 setSta 


// 1. 检测 常规 (异步 ) 任务 ， 如果 有 则 会 发 起 异步 调度 ( 调 
enSsureRootISScheduledq (oot，now() ) ; 


// 2. 检测 同步 任务 ， 如 果 有 则 主动 调用 flushSsynccCal1l 
上 USNSNCGCailoaeisOueuess 全 克 


总 结 

本 节 分 析 了 fiber 树 泻 染 的 处 理 过 程 , 从 安 观 上 

看 fiber 树 泻 染 位 于 reconcilezr 运作 流程 中 的 输出 
阶段 , 是 是 整个 reconcilez 运作 流程 的 链 路 中 最 后 一 
环 (从 输入 到 输出 ). ee 具体 

从 演 染 前 ， 泻 染 ， 演 染 后 三 个 方面 分 解 
Se 其 中 最 核心 的 泻 染 逻辑 又 分 
为 了 3 个 函数 , 这 3 个 函数 共同 处 理 了 有 副 作 

用 fiber 万 点 , 并 通过 演 染 器 react-dom 把 最 新 的 


DOM 对 象 演 染 到 界面 上 . 


效 据 井 理 


状态 与 副作用 


原文 : https:W/github.com/7kms/react- 
川 ustration-series/blob/main/docs/main/state- 
effects.md| 


title 
状态 与 副作用 


在 前 文 我 们 已 经 分 析 了 fiper 树 从 构造 到 泻 染 的 关键 
过 程 . 本 节 我 们 站 在 fiber 对 象 的 视角 , 考虑 一 个 具 
体 的 fiber 蔬 点 如 何 影响 最 终 的 泻 染 . 


回顾 fiber 数据 结构 , 并 结合 前 文 fiber 树 构造 系列 的 
解读 , 我 们 注意 到 fiber 众 多 属性 中 , 有 2 类 属性 十 
分 天 键 : 


1. fibez 节 点 的 自身 状态 : 
在 renderRootSync [Concurrent] [ 介 自 ， 为 子 节 
点 提供 确定 的 输入 数据 , 直接 影响 子 节点 的 生 
成 . 


2. fibez 节 点 的 副作用 : 在 cocmmitRoot 扮 段 ， 如 


果 fiber 被 标记 有 副作用 , 则 副作用 相 天 函数 会 
被 (同步 /异步 ) 调 用 . 


exXxpDort type Fiper = { | 
// 1. fiber 节 点 自身 状态 相关 
BesndnnegREaiseRS 本 二 有 y 
memoizedqProps : anyyv 
UpdateQueue : mixedyv 


memoizedState: anyy 


// 2. fipez 节 点 副作用 (Effect) 相 关 
要 esS RCIS 
subtreeElags: Elags，// v17.0.2 未 局 用 
ee 辣 必 让 下 和 有 合生 二 | 攻 OTIR 包 是 .0.2: 
SEEEEESESEEEIOSE TUOTOE 
SEC is 交 避 中 辣 际 
SSEREEESE 攻 区 SEE 全 | 耳语 I 
国 


状态 
与 状态 相关 有 4 个 属性 : 


1. fiber.pendingProps: 输入 属性 ， 


从 ReactElement 对 象 传 入 的 Props. 它 


和 fiber.memoizedProps 比 较 可 以 得 出 属性 是 
否 变动 . 

2. fiber.memoizedProps: 上 一 次 生成 子 节点 时 用 
到 的 属性 , 生成 子 节点 之 后 保持 在 内 存 中 . 向 下 
生成 子 节点 之 前 叫做 pendingProps, 生成 子 节 
点 之 后 会 把 psendaingProps 赋 值 
给 nemoizedqProps 用 于 下 一 次 比 
较 .pendingProps 和 memoizedqProps 比 较 可 以 得 
出 属性 是 否 变动 . 

3. fiber.updateoueue: 仓储 updaate 更 新 对 象 的 队 
列 , 每 一 次 发 起 更 新 , 都 需要 在 该 队列 上 创建 一 
个 update 对 象 . 

4. fiber.memoizedstate: 上 一 次 生成 子 节点 之 后 
保持 在 内 存 中 的 局 部 状态 . 


它们 的 作用 只 局 限于 fiber 树 构造 阶段 , 直接 影响 子 
节点 的 生成 

副作用 

与 副作用 相关 有 4 个 属性 : 


1. fiber.flags: 标志 位 , 表明 该 fiber 节 点 有 副 作 
用 (在 v17.0.2 中 共 定 义 了 28 种 副作用 ). 


2. fiber.nextEffect: 单 向 链表 , 指向 下 一 个 副 作 
用 fiber 节 点 . 

3. fiber.firstEgffect: 单 向 链表 , 指向 第 一 个 副 
作用 fiber 节点 . 

4. fiber.lastEffect: 单 向 链表 , 指向 最 后 一 个 副 
作用 fiber 万 点 . 


通过 前 文 Eibez 树 构造 我 们 知道 , 单个 fiber 世 点 的 副 
作用 队列 最 后 都 会 上 移 到 根 节 点 上 . 所 以 

在 commitRoot 阶 段 中 ，react 提 供 了 3 种 处 理 副 作 
用 的 方式 ( 详 见 fiber 树 泻 染 )， 


另外 ， 副 作用 的 设计 可 以 理解 为 对 状态 功能 不 足 的 补 
大 


。 状态 是 一 个 静态 的 功能 , 它 只 能 为 子 节 点 提供 数 
据 源 . 

。 而 副作用 是 一 个 动态 功能 , 由 于 它 的 调用 时 机 是 
在 fiber 树 泻 染 阶 段 , 故 它 拥有 更 多 的 能 力 , 能 轻 
松 获 取 突 变 前 快照 ， 突变 后 的 poM 节 点 等 . 甚至 通 
过 调用 api 发 起 新 的 一 轮 fiber 树 构造 , 进而 改变 
更 多 的 状态 , 引发 更 多 的 副作用 . 


外 部 api 


fiber 对 象 的 这 2 类 属性 , 可 以 影响 到 泻 染 结果 , 但 

是 fiber 结 构 始 终 是 一 个 内 核 中 的 结构 , 对 于 外 部 来 
讲 是 无 感知 的 , 对 于 调用 方 来 讲 , 甚至 都 无 需 知 

道 fiber 结 构 的 人 存在. 所 以 正常 只 有 通过 暴露 api 来 

直接 或 间接 的 修改 这 2 类 属性 . 


从 react 包 暴露 出 的 api 来 归纳 , 只 有 2 类 组 件 支 持 
修改 : 


本 万 只 讨论 使 用 api 的 目的 是 修改 fiper 的 状态 
和 副作用 , 进而 可 以 改变 整个 交 染 结果 . 本 万 先 
介绍 api 与 状态 和 副作用 的 联系 , 有 天 api 的 有 具 
体 实 现 会 在 class 组 件 ,Hook 原 理 章 节 中 详细 分 
析 . 


class 组 件 


Class APP extendqs React .Component { 
ee 由 芭 区 ch 全 作 二 | 
NSseaEes 二 三 蝇 
// 初始 状态 
局 汪汪 让 中 交 
} 1; 
} 
changesState = () => 1{ 


臣 攻 SEN 和 < 汪 二 攻 旋 区 站 /7// 
] ; 


// 生命 周期 国 数 : 状态 相 天 
static getDerivedqStateEFromProps (nextProps， 
console.lodg('detDerivedqStateFromProps ' ) ; 


Cetuzn PrevState， 


// 生命 周期 国 数 : 状态 相 天 
ShouldCcomponentUpadate (newProps，， newStatey : 
console.1logdg('"shouldcomponentUpdate "Il) ; 


Cetutn 七 ZUe ， 


// 生命 周期 冰 数 : 副作用 相关 fiber.flags |= Upda 
CemnpenenepDaieMoeD Re 人 是 时 


Genscje 汪 ee 人 EeemeenenEBaiaMemtee)s 


// 生命 周期 冰 数 : 副作用 相关 fiber.flags |= Sna 
9etSnapshotBeforeUpadate (PreVZPFEoPSs， PrevStat 
console.1lodg('getSnapshotBeforeUpadate ' ) ; 


// 生命 周期 冰 数 : 副作用 相关 fiber.flags |= Upda 
ComponentDiadqUpadqate () 1{ 


console.1Llog('"componentDiaqUpadate ' ) ; 


Cenaqer () { 
// 返回 下 级 ReactElement 对 象 


retutrn <button oncCclick={this.chandeState 


1. 状态 相关 : fibez 树 构造 阶段 . 


1. 构造 函数 : constructor 实 例 化 时 执行 , 可 
以 设置 初始 state, 只 执行 一 次 . 
2. 生命 周 
期 : getDperivedqstateEromProps 在 fipber 树 构造 
只 投 (zendaerRootsync [concurrent]) 执 
行 , 可 以 修改 state( 链 接 ). 
3. 生命 周 
期 : shoulacomponentUupdate 在 ，fiber 树 构造 阶 


段 (*endqerRootsync[concurrent]) 执 行 ， 


返回 值 决 定 是 否 执行 render( 链 接 ). 
2. 副作用 相关 : fibezr 树 泻 染 阶段 . 


1. 生命 周 


期 : getsnapshotBeforeUpdate 在 fiber 树 泻 染 


[阶段 
(commitRoot->commitBeforeMutationEffects-> 
执行 (链接 )， 

2. 生命 周 
期 : componentDiqMount 在 fiber 树 泻 染 阶 
段 
(commitRoot->commitLayoutEffects->commitLa 
执行 (链接 )， 

3. 生命 周 
期 : componentDiaqUpdate 在 fiper 树 泻 染 阶 
段 
(commitRoot->commitLayoutEffects->commitLa 


执行 (链接 ). 


可 以 看 到 , 官方 api 提 供 的 class 组 件 生命 周期 浮 数 实 
际 上 也 是 围绕 fiber 树 构造 和 fibezr 树 泻 染 来 提供 的 . 


function 组 件 


注 : function 组 件 与 class 组 件 最 大 的 不 同 

是 : class 组 件 会 实例 化 一 个 instance 所 以 拥有 独立 
的 局 部 状态 ; 而 function 组 件 不 会 实例 化 , 它 只 是 被 

直接 调用 , 故 无 法 维护 一 份 独立 的 局 部 状态 , 只 能 依 
靠 aoox 对 象 间 接 实现 局 部 状态 (有 天 更 多 Hook 实 现 细 


节 , 在 took 原 理 章节 中 详细 讨论 ). 


在 v17.0.2 中 共 定 义 了 14 种 Hook, 其 中 最 常用 


的 usestate， USeEffecty， useLavyoutEffect 等 


JEUosneaaein 情 AsieRO | 
// 状态 相关 : 初始 状态 
Const [aa setA]j = UseState (1 工 ) ， 
Const changesState = () => 1{ 
setRA(++a)， // 进入 reconcilezr 流 程 
} 1; 


// 副作用 相关 : fiper.flags |= Update | ,Passi 
UseEffect (() => { 
Console. logd( useEffect ) ; 


号 加 由 


// 副作用 相关 : fiper.flags |= Update; 
USeLayoutEffect (() => 1{ 
Console. LIogd( useLayoutEftfect ) ， 


和 国 国 肝 


// 返回 下 级 ReactElement 对 象 


zetuzrn <button onClLick={fchangeStatej}j>|{fal</L 


1. 状态 相关 : fibez 树 构造 阶段 . 


1. usestate 在 fiber 树 构造 叭 段 
(zendqerRootSync [Concurrent] ) 执 行 ， 吕 
以 修改 Hook .memoizedState. 


2. 副作用 相 天 : fiber 树 泻 染 阶段 . 


1. useEffect 在 fibezr 树 泻 染 阶 段 
(commitRoot->commitBeforeMutationEffects-> 
执行 (注意 是 异步 执行 , 链接 )， 

2. useLavyoutEaffect 在 fibper 树 泻 染 阶 段 
(commitRoot->commitLayoutEffects->commitLa 


执行 (同步 执行 , 链接 ). 


细节 与 误区 


这 里 有 2 个 细节 : 


1. useEffect (function(){}，[]) 中 的 函数 是 异 
步 执行 , 因为 它 经 过 了 调度 中 心 ( 具 体 实现 可 以 
回顾 调度 原理 ). 


2. useLayoutEffect 和 class 组 件 中 
的 componentDiqdqMount rr ComponentDidqUpdate 
从 调用 时 机 上 来 讲 是 等 价 的, 因为 他 们 都 


在 commitRoot->commitLayoutEffect s 吸 数 中 


被 调用 . 


。 误区 : 虽然 官网 文档 推荐 尽 可 能 使 用 标准 
的 USeEffect 以 避免 阻塞 视觉 更 新 5 所 以 
很 多 开发 者 使 用 ussgffect 来 代 


奉 componentDiqdMount rr ComponentDidqUpdate 


是 不 准确 的 , 如 果 完 全 类 
上 EL USeLayoutEffect kusezffect 更 符 


合 componentDiqdMount rrComponentDidqUpdate 


的 定义 . 


为 了 验证 上 述 结 论 , 可 以 查看 codesandbox 中 的 例 


本 节 从 fiber 视 角 出 发 , 总 结 了 fiber 节 点 中 可 以 影 
响 最 终 泻 染 结果 的 2 类 属性 (状态 和 副作用 ). 并 且 归 纳 
了 class 和 function 组 件 中 , 直接 或 间接 更 改 fiber 
属性 的 常用 方式 . 最 后 从 fiber 树 构造 和 泻 染 的 角度 
对 class 的 生命 周期 函数 与 function 的 Hooks 范 数 进行 
了 比较 . 


Hook 原理 (概览 


原文 : https:W/github.com/7kms/react- 
川 ustration-series/blob/main/docs/main/hook- 
summary.md 


title 
Hook 原理 (概览 ) 


在 前 文 状 态 与 副作用 中 , 总 结 

了 class 组 件 ，function 组 件 中 通过 api 去 改 

变 fiber 节 点 的 状态 和 副作用 . 其 中 对 于 function 组 件 
来 讲 , 其 内 部 则 需要 依靠 ook 来 实现 . 


官方 文档 上 专门 用 了 一 个 版 块 来 介绍 Hook, 这 里 摘 
抄 了 几 个 比较 天 心 的 问题 (其 他 rao 请 移 步 官网 ): 


1. 5 | 入 Hook 的 动机 ? 


。 在 组 件 之 间 复 用 状态 逻辑 很 难 ; 复杂 组 件 
变 得 难以 理解 ; 难以 理解 的 class. 为 了 解 
决 这 些 实 际 开 发 痛 点 , 引入 了 Hook. 


3. Hook 是 什么 ? 什么 时 候 会 用 Hook? 


。 Hook 是 一 个 特殊 的 函数 , 它 可 以 让 你 '“ 钧 
入 ”Reacet 的 特性 . 如 ，usestate 是 允许 
你 在 有 ESacCt 浮 数 组 件 中 添加 S 七 3 七 名 
的 Hoork. 

。 如果 你 在 编写 函数 组 件 并 意识 到 需要 向 其 
添加 一 些 state, 以 前 的 做 法 是 必须 将 其 
转化 为 class. 现在 你 可 以 在 现 有 的 闻 数 
组 件 中 使 用 Hook. 


6. Hook 会 因为 在 演 染 时 创建 衣 数 而 变 慢 吗 ? 


。 不 会. 在 现代 浏览 器 中 , 闭 包 和 类 的 原始 性 
能 只 有 在 极端 场景 下 才 会 有 明显 的 差别 . 
除 此 之 外 ,可 以 认为 Hook 的 设计 在 某 些 方 
面 更 加 高 效 : 


C Hook 避免 了 class 需要 久 人 额外 开 文 ， 
像 是 创建 类 实例 和 在 构造 水 数 中 绑 定 
事件 处 理 器 的 成 本 . 

O 符合 语言 习惯 的 代码 在 使 用 aook 时 
不 需要 很 深 的 组 件 树 谋 套 . 这 个 现象 
在 使 用 高 阶 组 件 、r*ender props、 

和 context 的 代码 库 中 非 党 普遍 . 组 


件 树 小 了 ，React 的 工作 量 也 随 之 碱 


生 
少 . 


所 以 Hook 是 React 团 队 在 大 量 实践 后 的 产物 ， 更 优雅 
的 代替 class, 且 性 能 更 高 . 故 从 开发 使 用 者 的 角度 
来 讲 , 应 该 拥抱 gook 所 带 来 的 便利 . 


Hook 与 Fiber 


通过 官网 文档 的 讲解 , 能 快速 掌握 Hookx 的 使 用 . 再 结 
合 前 文 状 态 与 副作用 的 介绍 , 我 们 知道 使 用 Hook 最 
终 也 是 为 了 控制 fibezr 节 点 的 状态 和 副作用 . 从 fipber 
视角 , 状态 和 副作用 相关 的 属性 如 下 (这 里 不 再 解释 
单个 属性 的 意义 , 可 以 回顾 状态 与 副作用 ): 


exXxpDort type Fiper = ( 
// 1. fiber 节 点 自身 状态 相关 
BEenmaingErepbs any 
memoizedqProps: anyv 
UpdateQueue : mixedyv 


memoizedqState: anyv 


// 2. fiber 节 点 副作用 (Effect) 相关 
aes EscSs 7 
mexXtEffect: Pibper ii 间 因 于 


人 TS 加 人 全 和 人 区 TOe 倍加 癌 辐 本 
EEC SO 
功 


使 用 aook 的 任意 一 个 api, 最 后 都 是 为 了 控制 上 述 这 
几 个 fiber 属 性 . 


Hook 效 据 结构 


在 ReactFiberHooks 中 , 定义 了 Hook 的 数据 结构 : 


DER 
Jane: Laney 
aiGI ANAE 
eagerReducer: ((S，A) => S) TI 
eagemeealeer 量 5 五 可 
人 全 关机 忆 QaiEe 天 S 六 之 > 
Priority?: ReactPriorityLeve1l， 


| 胰 


type Updateoueue<S，RA> = 1{| 
pending: Update<S，RA> | nul1l， 
Qispatch: (A => mixed) iD 
astRendqeredqReducer: ((S，A) => 9S) mu 
1astRenderedState: S | nul1， 


必 


expPort type Hook = { | 
memoizedstate: any，// 当前 状态 
baseSstate: any，// 基 状 态 
baseoueue: Updqate<any， any> nul1L1，// 基 队 
dueue: UpdateQueue<any，， any> nul1，// 更 计 
next: Hook | nul1，// next 指 针 

国 玉 


从 定义 来 看 ，Hook 对 象 共有 5 个 属性 (有 天 这 些 属 性 
的 应 用 , 将 在 took 原理 (状态 ) 章节 中 有 具体 分 析 .): 


1. hook .memoizedState: 保持 在 内 存 中 的 局 部 状 


2. hook .basesState: hook.baseoueue 中 所 
有 update 对 象 合 并 之 后 的 状态 . 

3. hook .baseoueue: 存储 update 对 象 的 环形 链表 ， 
只 包括 高 于 本 次 泻 染 优先 级 的 upaate 对 象 . 

4. hook .dueue: 存储 updaate 对 象 的 环形 链表 , 包括 
所 有 优先 级 的 update 对 象 . 

5. hook .next: next 指 针 , 指向 链表 中 的 下 一 


个 hook， 


所 以 Hook 是 一 个 链表 , 单个 gook 拥 有 目 己 的 状 


态 hook ; memoizedstate 和 自 己 的 更 新 队 


区 hook 5 queue( 有 关 Hook 状态 的 4 分 析 ， 
在 Hook 原 理 (状态 ) 章节 中 解读 ). 


Hook 链 表 
Text 
队 。 
Hook “ 。 ， - queue 。 pendng -HE 0 
nextt 沁 
证 
update update 
Hook queue pendng Ga next 1 next 2 
next 
疝 Text 
update update update 
Hook queue pendin9 IE next ~ 1 next 2 


注意 : 其 中 hook .dueue 与 fiber.updateoueue 虽 然 都 
是 updaate 环 形 链表 , 尽管 upaate 对 象 的 数据 结构 与 处 
人 但 是 这 2 个 队列 中 的 upaate 对 象 

完全 独立 的 . hook .queue 只 作用 于 hook 对 象 的 状 
二 切 幻 与 fiber. updateoueue 混 清 . 


Hook 分 类 


在 v17.0.2 中 , 共 定 义 了 14 种 Hook 


expPort 廿 ypPpe HookType = 
SeSealeee 
ESeRedueen 


USSCemesoee 


"USeReE 
"UseEfEfect 
"UseLayoutEffect 
"usecCal1pback'" 


"UseMemo 


"useDepbugValue 
"useDefertredValue' 
Use 下 amSaneeni 
"useMutapleSource'， 


"useImperativeHandle' 
"useoOpadqueIdentifier'"'， 


官网 上 已 经 将 其 分 为 了 2 个 类 别 |， 状态 Hook 


(State Hook), 和 副作用 Hook(Effect Hook). 


这 里 我 们 可 以 结合 前 文 状态 与 副作用 , 从 fiper 的 视 
角 去 理解 状态 Hook 与 副作用 Hook 的 区 别 . 


状态 Hook 


狭义 上 讲 ，usestate，useReducer 可 以 

在 function 组 件 添 加 内 部 的 state, 且 usestate 实 际 
上 是 useReducer 的 简易 封装 , 是 一 个 最 特殊 (简单 ) 
的 useReducer. 所 以 将 usestate，useReducer 称 
为 状态 Hook. 


广义 上 讲 , 只 要 能 实现 数据 持久 化 且 没 有 副作用 

的 Hook, 均 可 以 视 为 状态 Hook, 所 以 还 包 

插 usecontext，useRef，usecallback，useMemo 等 . 
这 类 Hook 内 部 没有 使 用 usestate/useReducer, 但 是 


它们 也 能 实现 多 次 render 时 , 保持 其 初始 值 不 变 ( 即 
数据 持久 化 ) 且 没有 任何 副作用 . 


得 益 于 双 缓 冲 技术 (double buffering), 在 本 
时 ， 以 fiber 为 载体 ， 保证 复 用 同一 个 Hook 对 象 , 进 
实现 数据 持久 化 . 具体 实现 细节 ， et 
章 万 中 讨论 . 


副作用 Hook 


回 到 fibezr 视 角 ， 状 态 Hook 实 现 了 状态 持久 化 (等 同 
于 -class 组件 维护 fiber.memoizedstate), 那 
么 副作用 Hook 则 会 修改 fiber.flags. (通过 前 
文 fiber 树 构造 系列 的 解读 , 我 们 知道 
在 performUnitofWwork->completeWwork[ 叭 段 ,所 有 存 
在 副作用 的 fibez 世 点, 都 会 被 添加 到 父 书 氮 
本 最 后 在 commitRoot 阶 段 处 理 这 


另外 ， 副 作用 Hook 还 提供 了 副作用 回调 (类 似 
于 class 组 件 的 生命 周期 回调 )， 比如 : 


// 使 用 useEaffect 时 ， 需 要 传 入 一 个 副作用 回调 函数 . 
// 在 fiber 树 构造 完成 之 后 ， commitRocot 阶 段 会 处 理 这 上册 
USeEffect (() => 1{ 
console.1og(' 这 是 一 个 副作用 回调 亢 数 ' ) ; 
有 


在 react 内 部 ，useEftfect 就 是 最 标准 的 副作用 Hook. 
其 他 比如 useLavyoutEaftfect 以 及 自 定义 Hook, 如 果 要 
买 现 副作用 ， 必须 直接 或 间接 的 调用 useEffect. 


有 关 useEffect 具 体 实 现 细 节 , 在 took 原 理 (副作用 ) 章 
节 中 讨论 . 
组 合 Hook 


虽然 官网 并 无 组 合 Hook 的 说 法 , 但 事实 上 大 多 数 Hook 
(包括 自 定 义 Hook) 都 是 由 上 述 2 种 Ecok 组 合 而 成 ， 
同时 拥有 这 2 种 Hook 的 特性 . 


在 react 内 部 
有 useDeferreqvalue， USeTransitiony useMutabpb1le5 


。 平 时 开发 中 ,， 自 定义 Hook 大 部 分 都 是 组 合 Hook. 


比如 官网 上 的 自 定义 Hook 例 子 : 


Import { useState useEffect } from "teact ' 


下 下 亲人 臣 四 站 二 全 开 enmostasEusEemoOTDJ RH 
// 1. 调用 usestate， 创 建 一 个 状态 Hook 


const [isonlLliney setIson1line]l = useState (ni 


// 2. 调用 useEgffect， 创 建 一 个 副作用 Hook 
USseEffect (() => { 
function handqleStatuschange (status) ({ 
setISsSOn1lLine(status .isonline) ， 


】 
ChatAPI.subsctribeToFrienadqStatus (frienadqID， 


Ceturn () => { 
ChatAPI.unsubscripbpeFromEtziendqStatus ( 荆 : 
} 
}) ;7 


Ceturn 1sSoOn1Line，; 


调用 function 前 


在 调用 function 之 前 ， Ceact 内 部 还 需要 提前 做 一 些 
准备 工作 . 


处 理 浮 效 


从 fiber 树 构造 的 视角 来 看 , 不 同 的 fiber 类 型 , 只 需 
要 调用 不 同 的 处 理 函 数 返 回 fiber 子 节点 . 所 以 在 
performUnitOfWork->beginWork 函 数 中 , 调用 了 多 
种 处 理 函 数 . 从 调用 方 来 讲 , 无 需 天 心 处 理 函 数 的 内 部 
实现 (比如 upaateFfunctioncomponent 内 部 使 用 

了 Hook 对 象 ，updateclasscomponent 内 部 使 用 

了 class 实 例 )， 


本 有 讨论 tocok, 所 以 列 出 其 中 的 


UpdateFunctionComponent 表 数 : 


只 保留 FunctionCcomponent 相 关 : 
function beginWNWork ( 
CE 
WOLTKIDnProdgtress: REiper， 
zendqerLanes: Lanesy， 
和 下 :Rose 1 
const updateLanes = WOFKIDProdgress .anes， 
Switch (workInProgress.tag) { 
case FunctionComponent 上 : 1{ 
Const Component = WOTrKIDnProgress .ype，; 
const _ unresolvedqProps = WOFKIDPEodgress 
Const resolvedqProps := 
WOLTKInProdgress .elementIType === Compor 


? _ unresolvedProps 


zesolVeDefaultPzops (CompPponemnt， UI 
zetutrn updqateFEunctionCcomponent ( 
CsEmnHE5 
woOrKIDPProdgressy 
CompPonent， 
zeSolvedqPropsy 


CenaqerLanesy 


function upadqateEunctionComponent ( 
CUEIEent， 
woOrKIDPProdgressy 
CompPonenty， 
ee 文 攻 E@iS my 
zenadqerLanesy 
JE 
// .. .省 略 无 关 代 码 
et ContexXt ， 
et nextChildren， 


PrepareTIToReadContext (WOorKIDnPFEogress， Fendadei 


// 进入 Hooks 相 关 远 辑 ， 最 后 返回 下 级 ReactElementy》 
nextChiladren = iendqerWithHooks ( 
CUTTent， 


WOLrKIDPProdgressy， 


CoeompPomnent， 

mextEPELrops， 

exelen 可 二 >aE 

zenqdqerLanesy 
) ; 
// 进入 reconcile 国 数 ， 生 成 下 级 fiber 节 点 
reconcilechildqren (current，workInProdressy 
// 返回 下 级 fibez 节 点 


ElenWOpKEOIREEOdRESS 本 COIOD 


在 upqateFfFunctioncomponent 国 数 中 调用 了 
renderWithHooks( 位 于 ReactFiberHooks) , 至 
此 Fipber 与 Hook 产 生 了 关联 . 


全 局 变量 


在 分 析 r*endqerWithHooks 浮 数 前 ， 有 必要 理解 
ReactFiberHooks 头 部 定义 的 全 局 变量 (源码 中 均 有 
英文 注释 ): 


// 泻 染 优先 级 


et rendqerLanes: Lanes = NoLanes， 


// 当前 正在 构造 的 Eiber， 等 同 于 workInProgress， j 


Tet current1LyRenderingEiper: Fipbper = (nulL1: : 


// Hooks 被 存储 在 fiper .memoizedSstate 链表 上 


ES cu 


EeenRBYEOogsessooe Heoek 何 册 可 呈 并 7 / 


// 在 function 的 执行 过 程 中 ， 是否 再 次 发 起 了 更 新 . 只 丰 
// 当 render 异 常 时 ， 通 过 该 变量 可 以 决定 是 否 清 除 rende 
Jet qidqSchedquleRenaderPhaseUpadqate: boolean = |: 


// 在 本 次 function 的 执行 过 程 中 ， 是 否 再 次 发 起 了 更 新 . 


Jet qidqScheadquleRenaderPhaseUpadateDurindgTnhiSsPas 


// 在 本 次 function 的 执行 过 程 中 ， 重 新 发 起 更 新 的 最 大 次 


Ge 不 S 巧 汪 民 本 天 民 民 N 用 辣 RINMEERE 三 演 2 5 


每 个 变量 的 解释 , 可 以 对 照 源码 中 的 英文 注释 , 其 中 
最 重要 的 有 : 


1. current1yRenderingFiber: 当前 正在 构造 的 
fiber, 等 同 于 worklnProgress 
2. currentHook 与 workInProgressHook: 分 别 指 


各 current .memoizedqSstate 


和 workInProgress .memoizedState 


注 : 有 关 current 和 workInProgress 的 区 别 , 请 回顾 
双 缓 冲 技术 (double buffering) 


renderWithHooks 函数 


renderWithHooks 源 码 看 似 较 长 , 但 是 去 除 dev 后 保 
留 主干 , 逻辑 十 分 清晰 . 以 调用 function 为 分 界 点 ， 
逻辑 被 分 为 3 个 部 分 : 


// .. .省 略 无 关 代码 

eXpPort function crendqerWithHooks<Props，Seconc 
EU | 
WOLTKInProdtress: ERiper， 
Component : (PP: Props，arg: SeconaATrd)| => ai 
iseeseEnselos 
SecondArg: SeconadqArg， 


nexXxtRenadqerLanes: Lanesy 


TS 
帮 1. 设置 全 局 变量 -==-------- 
renqerLanes = nextRendqerLanes; // 当前 演 染 优 
CUTLTent1IYyRenderingEiper = WOLTKIDPPLogtress; 


// 清除 当前 fibez 的 遗留 状态 
WOLrKIDnProdgress .memoilizeadqState = nul1l; 
woOrKInProgress.updatecQueue = nul1l; 


WOrKIDProgress. Lanes = NoODanes， 


[入 2 .调用 function, 生 成 子 级 Rs 
// 指定 dispatcher， 区 分 nount 和 upqate 


ReactCurrentDispatcher.Ccurrent = 三 


curzent === null || curzrent .memoizehStats 
? HooksDispatchezcroOnMount 


HooksDispatcheronUpdate， 
// 执行 ftunction 函 数 ， 其 中 进行 分 析 Hooks 的 使 用 


Jet _ children = Component (Props，seconaqArd) ; 
2 3. 重 置 全 局 变量 , 并 返回 ----- 
// 执行 function 之 后 ， 还 原 被 修改 的 全 局 变量 ， 不 影 
zendqerLanes = NoLanes ; 

CUTLTent TYyRendqeringEFiper = (nul1: any) 
peias= ourexel< 一 ob 本 

woOLrKIDPProdgressHook = Dnul1l，; 


qidScheduleRendqerPhaseUpdate = false， 


zeturn childqren， 


. 调用 function 前 : 设置 全 局 变量 , 标 
记 泻 染 优先 级 和 当前 fiber, 清除 当前 fibesr 的 遗 
留 状态 . 
. 调用 function: 构造 出 Hooks 链 表 , 最 后 生成 子 


级 ReactElement 对 象 (children). 
3. 调用 function 后 : 重 置 全 局 变量 , 返 


回 -hilaqren. 


四 为 了 保证 不 同 的 function 节 点 在 调用 
时 z*enqerwithHooks 互 不 影响 ， 所 以 退 出 时 
重 置 全 局 变量 


调用 function 


Hooks 构造 


在 function 中 , 如 果 使 用 

了 Hook api( 如 : useEffect， useState)， 就 会 创建 

一 个 与 之 对 应 的 aook 对 象 , 接 下 来 重点 分 析 这 个 创 
建 过 程 . 


有 如 下 demo: [image] 


Import React，，{ usesState useEffect } from "1 
expDort aqefault function ApP() { 

// .useState 

Const [a setAl]j = UseState (1) ， 

// 2. useEffect 

UseEffect(() => (1{ 


ooeR 人 ES 贡 证 EECSNSEETIESEeR 


} ) 7 
ESSEaEs 


const [bl = useState (2) ; 
7 二 全 SS 全 人 在 Se 下 
SHEET 人 人 和 三 过 


console.lodgd( effect 2 createdq `  ) ; 
} ) ; 
GEiwuasmai( 
< 
<button onClick={() => SetA(a + 1)}>1{a- 
< 下 OTDREEOnE 
< 多 
) ;7 


在 function 组 件 中 , 同时 使 用 了 状态 Hook 
和 副作用 Hook. 


初次 泻 染 时 , 逻辑 执行 

到 performUnitofWwork->beginWork->updateEunctioncomr 
前 , 内 存 结构 如 下 (本 节 重 点 是 aoox, 有 

关 fiber 树 构造 过 程 可 回顾 前 文 ): 


fiber 树 构造 过 程 (构造 进行 中 ) 


RenderLanes = NoLanes 


ReactElement 结 构 fber 树 2( 内 存 中 ) fiber 树 1( 当 前 页 面 , 首次 构造 , 页 面 未 泻 染 ) 


当 执 行 zendqerwithHooks 时 ， 开始 调用 function. 本 
例 中 ， 在 function 内 部 ， 共 使 用 了 4， 次 Hook apP1I， 依 
欠 调 


用 usestate， USeEffect，useState， useEffect. 


而 usestate，useEffect 在 fiber 初 次 构造 时 分 别 对 
应 mountState 和 mountEffect->mountEffectlmpl 


EeeonEEmemnmesSieaiee 过 5 
iiisise es (人 一 二 | 攻 S 

) ETSRDseoaEeEREBaSeeeaEeAeen 和 一 | | 
Const hook = mountWorKkInProgressHook (|) ; 
// .. .省 略 部 分 本 节 不 讨论 


return [hook .memoizedqState，，dqispatch]:; 


function mountEffectImPp1 (fiberFlags hookEFIa 
Comstnoek = mentNWorKkTrInPTroogSssHook() ， 


// .. .省 略 部 分 本 节 不 讨论 


无 论 usestate， useEgffect, 内 部 都 通 


过 mountworkInP OOgGresS sHook 创 建 一 个 hook. 


链表 存储 


而 mountWorklnProgressHook 非 常 简单 : 


function mountWorkInProdgdressHook(): Hook ({ 
Const hook: Hook = { 


memolizedqState: nul1l， 


basesState: nul1l， 
baseoueue: nul1l， 


Gqueue : null， 


seoD 辐 术 


] ; 


IE (workInProgressHook === null1L) 1{ 


// 链表 中 首 个 hook 


CUTrTent1LIYyRenadqeringEFiper.memoizedqState = ， 


} else { 


// 将 hook 添 加 到 链表 末尾 


WOLTKIDnProdgressHook = WOLTKIDnProgressHook .i 


} 


zeturn workInDPFogressHook，; 


逻辑 是 创建 aook 并 挂 载 到 fiber.memoizedstate 上 ， 
多 个 Hook 以 链表 结构 保存 . 


本 示例 中 ，functicn 调 用 之 后 则 会 创建 4 个 hook， 
这 时 的 内 存 结构 如 下 : 


fiber 树 构造 过 程 (构造 进行 中 ) 


props qhidren 


tpewbutton” Hyper*buttom 
| propschildren-"1" propschildren-“2" 


ReactElement 结 构 fiber 树 2( 内 存 中 ) fiber 树 1( 当 前 页 面 , 首次 构造 , 页 面 未 泻 染 ) 


可 以 看 到 : 无 论 状态 Hook 或 副作用 Hook 都 按照 调用 | 
序 人 存储 在 fiber memoizedstate 链 表 中 。 


页 


fibermemoizedsState 


人 
L <App/> | 
4 

tate 


memoizedState 


queue 国 Hook {state) 


memoizedState | 


aa 


[| 
oOizedState 
一 queue 人 吓人 


next 


memoizedsState 
ER 
| 


顺序 克隆 


fiber 树 构造 (对比 更 新 ) 阶段 , 执 

行 updaateEunctioncomponent->rendqerWithHooks 时 
再 次 调用 function， 调 用 function 前 的 内 存 结构 如 
下 : 


fiber 树 内 存 结构 (构造 循环 之 前 ) 


workinProgressRootRenderLanes = NoLanes workinProgressRoot 一 一 一 一 


fiber 树 2( 内 存 中 ) fiber 树 1( 当 前 页 面 ) 


注意 : 在 rendqerWithHooks 孙 数 中 已 经 设置 
了 workInProgress .memoizedState 三 -六 已 上] 等 街 调 


用 function 时 重新 设置 . 


接 下 来 调用 function, 同样 依次 调 
用 usestate， USeEffect，usesState useEffect. 


而 usestate 2 useEffect 在 fiber 对 比 更 新 时 分 别 对 
应 updateState->updateReducer 和 updateEffect- 


>uUpdateEffectlmpl 


function upadateReaducer<S，I，A>( 
redqucer: (S，A) => S， 
esE 本 RATS GE 汪汪 
TREE 
JESEUIDaSGEUEGESS | 攻 | 
Const hook = updateWorkInProgressHook() ; 


// .. .省 略 部 分 本 节 不 讨论 


副作用 Hook -------- 
function updateEffectImP1L (fipezrFlagds hookE1: 


Const hook = updqateWorkInProgressHook() ; 


// .. .省 略 部 分 本 节 不 讨论 


无 论 usestate， useaffect, 内 部 调 


用 upaateworkInProgressHook 获 取 一 个 hook. 


function upaqateWorkInProgressHook (): Hook { 
// 1. 移动 currentHook 指 针 
let nextCurrentHook: nul1 | Hook; 
If (currentHook === mulL1lL) { 
Const current = CuUrrent1LYyRenadqerindgEFiper .: 
RECC TeTM 七 是 三 三 汪 和 milaI 证 二 人 


mextCurrentHook = CUTTent .memoizeasStat 


} else { 


nextCurzentHook = nul1l，; 
} 
} else { 
nexXxtCurrentHook = CUTTentHook .nexXxt， 


以 


2. 移动 workInProgressHook 指 针 


et mextWorkInProgressHook: nul1l HooOk:; 


3 


} 


3 


(woOLTrKIDnProdgressHook === mullL) { 
nextWorkInProgressHook = CuUrtent1LYyRenadqeL: 


else { 


nextWorKInPEOogzresSsHook WOLTKInPLEogress 


(nextWorkInProdgressHook !== nullL) |{ 
// 泻 染 时 更 新 : 本 节 不 讨论 
else { 
CULTLTentHook = mextCuzrentHook，; 


// 3. 克隆 currentHook 作 为 新 的 workInProdgres: 
// 随后 逻辑 与 nountWorkInProgressHook 一 臻 
Const newHook: Hook = { 


memoizedState: currentHook .memoizedStat 


paseState: CurrentHook .pasesStateyv 
baseoueue : currentHook .baseoueuey， 


dueue: CurrentHook .queueyv 


next : nul1，// 注意 next 指 针 是 nul11 


] ; 


IE (workInProdgressHook === nulL1L) 1{ 


CULTLTent TYyRenderingEiper.memoizedState := 
} else { 


WOLTKIDnProdgressHook = WOLTKIDnPogressHool 


} 


zeturn worKkIDPFogressHook，; 


updateWorkInProgressHook 中 数 逻 辑 简 单 : 目的 是 
为 了 让 currentHook 和 workInP zOgres sHook 两 个 指 


针 同 时 向 后 移动 . 


1. 由 于 r*endqerwithHooks 函 数 设 置 
了 workIinProgress .memoizeqSstate=nul1, 所 
以 workInProgressHook 初 始 值 必 然 为 null, 只 
能 从 currentHook 克 隆 . 

2. 而 从 currentHook 克 隆 而 来 
的 newHook .next=null, 进而 导 
致 workInProgressHook 链 表 需 要 完全 重建 . 


所 以 function 执 行 完 成 之 后 , 有 关 Hook 的 内 存 结构 
如 下 : 


fiber 树 内 存 结构 (构造 进行 中 ) 


wordnProgressRootRenderLanes = NoLanes WorkinProgressRoot es 一 一 一 一 一 FibeRoot 


workinProgress 
(beginworg 


hoda hehoae 
fiber 树 2( 内 存 中 ) fiber 本 1( 当 前 页 面 ) 


可 以 看 到 : 


1. 以 双 缓 中 技术 为 基础 ， 


将 current memoizedstate 按 照 | 


页 序 克 隆 到 
了 workInProdgress .memoizedstate 中 . 

2. Hook 经 过 了 一 次 克隆 , 内 部 的 属性 
(hook .memoizedSstate 等 ) 都 没 变动 ， 所 以 其 


状态 并 不 会 于 失 . 


fibermemoizedState(clone) 


workinProgress CuUrrent 
村 二 alternate 了 
无 DN F N\ 
『 SS A N 
人 <App> j <App/> 】 
7 
| 完全 鳃 用 
memoizedState 
Hook {state) queue 一 一 一 HHjook {state) 
next nexdt 
memoizedState 
全 站 
Hook (effecy 一 一 凶 queue 
next next 
j mermoizedState | 
Hook (statej 。 一 一 一 一 一 queue “一 一 Hook (state) 
next next 
mermoizedState | 
一 | queue Hook (effeci 


本 书 首先 引入 了 官方 文档 上 对 于 aook 的 解释 ， 了 
解 Hook 的 由 来 , 以 及 ook 相 较 于 class 的 优势 . 然后 
从 fiber 视 角 分 析 了 fiber 与 hook 的 内 在 关系 , 通 
过 renqerwithHooks 函 数 , 把 aook 链 表 挂 载 到 

了 fiber.memoizedState 之 上 . 利用 fiber 树 内 部 的 
双 缓 冲 技 术 ， 实现 了 Hook 从 current 

到 workInProgress 转 移 ， 进而 实现 了 Hook 状 态 的 持 


入 化 . 


Hook 原理 (状态 Hook) 


原文 : https:W/github.com/7kms/react- 
川 ustration-series/blob/main/docs/main/hook- 
state.md 


title 
Hook 原理 (状态 Hook) 


首先 回顾 一 下 前 文 Hook 原理 (概览 ), 其 主要 内 容 有 : 


1. function 类 型 的 fiber 节 点 , 它 的 处 理 函 数 是 
updateFunctionComponent, 其 中 再 通过 
renderWithHooks 调 用 function. 

2. 在 ftunction 中 , 通 
过 Hook Api( 如 : usestate，useEffect) 创 | 


建 Heok 对 象 . 


。 状态 Hook 实 现 了 状态 持久 化 (等 同 

于 -class 组件 维护 fiber.memoizedState). 

副作用 Hook 则 实现 了 维护 fiber.flags, 并 

提供 副作用 回调 (类 似 于 class 组 件 的 生命 周 


期 回调 ) 
5. 多 个 Hook 对 象 构成 一 个 链表 结构 , 并 挂 载 
到 fiber.memoizedstate 之 上 . 
6. fiber 树 更 新 阶段 , 把 -current .memoizeqdstate 
链表 上 的 所 有 Hocok 按 照 顺序 克隆 
到 workIinProgress .memoizedqstate 上 , 实现 数 


据 的 持久 化 . 


在 此 基础 之 上 , 本 节 将 深入 分 析 状 态 aookx 的 特性 和 实 
现 原 理 . 


创建 Hook 


在 fiber 初 次 构造 阶段 , useState 对 应 源码 
mountState, useReducer 对 应 源码 mountReducer 


moOuntState: 


EDioiereeaKoiognieoibionhesis he Se 
ESOSEE 三 = 二 ES 
)EE:TSRDNsESeEeh<BaseSEeaEEAReeen<s2 | 
// 1 工 . 创建 hook 
Const hook = mountWorkInProgressHook (|) ; 
If _ (typeof initialState === '" function'"') ({ 


InitialState = initialState () ，; 


】 
// 2. 初始 化 hook 的 属性 
// 2.1 设置 hook.memoizedqState/hook.baseSta 
// 2.2 设置 hook .queue 
hook .memoizedState = hook.baseState = init: 
const Gdqueue = (hook.dqueue = { 

让 EmmagRG 

ESISsiEeR EU 

// dueue.1lastRenderedReducer 是 内 置 油 数 


astRendqeredqReducezr : basicStateReducer， 


astRenadqeredState: (initialState: any)， 
} ) ; 
// 2.3 设置 hook.dispatch 
GanIEEEeaSeEiE eaDSTSERESE 


BasicStateAction<S>， 


> = (queue.dqispatch = (qispatchAction.pinad 
WU 国 时 
CULTLTent TYyRendqeringEiper， 
dueueyv 

TS 出 天 


// 3. 返回 [当前 状态 ，qispatch 国 数 ] 


retutrn [hook .memoizedqState，，qispatch]:; 


mountRedqucer: 


CGODmIEEREOGUCE 关 DT 人 2 
edwee ks NA 了 三 之 硬 7 
ee 训 AS GE 汪 下 
RE 
JIESIDaSIGEUEGIESS | 必 1| 
四 aeee ls 
const hook = mountWorkInProgressHook (小 ; 
下 et 本 ESESEe > 


If (init !== unaqefined) 1{ 
NEGMES 二 本 区 人 是 三 JWriNe (NOSEEGNAE GE 
} else { 
站 a 本 已 生 本 三 有 人 Eee am SS) ， 


】 
// 2. 初始 化 hook 的 属性 
// 2.1 设置 hook.memoizeqState/hook.baseSta 


hook .memoizedState = hook.baseState = 1nit: 
// 2.2 设置 hook .queue 
const Gdqueue = (hook.dqueue = { 


SS 
ISSNeENE GRADE 
// queue.1lastRenderedReducezr 是 由 外 传 入 
astRendqeredqRedqucer : edqucery 
astRenadqeredState: (initialState: any)， 
赔 局 
// 2.3 设置 hook.dqispatch 
const qispatch: Dispatch<A> = (queue.dqispat 
天 二 | 本 


CUTLTent TYyRendqezringEiper， 


cueueyv 


) 正 汪 Smy) 有 电 


// 3. 返回 [当前 状态 ，qispatch 吨 数 ] 


return [hook .memoizedqState，qispatch]: 


moOUnt state 和 mountReducer 逻 辑 简 单 : 主要 负责 创 


建 hnook, 初始 化 hook 的 属性 , 最 后 返 


回 [当前 状态 ，qispatch 函 数 ] . 


唯一 的 不 同 点 


是 hook .queue .astRendqeredqReducer: 


。 moOunt state 使 用 的 是 内 置 的 


basicStateReducer 


function basicStateRedqucer<S> (State: S， 


zetutrn typeof action === "function' ? 


。 mountReducez 使 用 的 是 外 部 传 入 自 定 


义 reducer 


可 见 mountstate 是 mountReducezr 的 一 种 特殊 情 ; 


即 usestate 也 是 useReducez 的 一 种 特殊 情况 , 也 是 
最 简单 的 情况 . 


usestate 可 以 转换 成 useRedqucer: 


Const [state， qispatch]l = USseState({ count: 


是 寺 侧 二 
Gonmstalisateenairspbateni 


USeRedquceL ( 

function basicStateReducer (state，， action) :| 
zetutrn t 上 ypPeof action === function'"' 2? act 

}， 

(Icewmne Ole 


) ;7 


// 当 需 要 更 新 state 时 ， 有 2 种 方式 
qispatch({ count: 1 ))， // 1. 直 接 设 置 
Qieseatehaseate 三 (CO SEEaEEcounniil + 1 


userReducer 的 官网 示例 : 


const [state，，dqispatch]l = useRedqucer ( 
function requcer (state action) { 


SWwWeaech 参 人 已 站 DREYiee) 


xceREiS 


下 人 长 林 基 作 成 站 体 共 : 


地 思 己 所 


下 二 本 下 人 二 用 人 全 全 有 起 


Qefault : 


人 GT; 


"Qecrement ' : 


SaeeeouneEHeI )， 


Seaees Co )， 


起 PseW 呈 IE 本 EeeOn 全 于 


// 当 需 要 更 新 state 时 ， 
Qispatch({f type : 


只 有 1 种 方式 


"Qqaectement' }) ，; 


可 见 ，usestate 就 是 对 useRedqucer 的 基本 封装 
置 了 一 个 特殊 的 zedaucer( 后 文 不 再 区 


分 useSstate， useReducer, 都 以 usestate 为 


例 ). 创 建 hook 之 后 返 


值 [hook.memoizedstate， dispatch] 中 的 aispatch 


实际 上 会 调用 *eaucer 国 数 ， 


状态 初始 化 


企 usestate(initialstate) 苞 


浮 数 内 部 , 设 


置 hook .memoizedqdSstate = hook .baseState = 1nitIalLSta 


初始 状态 被 同时 保存 到 


了 hook.basestate,hook.memoizedstate 中 . 


1. hook .memoizedqstate: 当前 状态 
2. hook.basestate: 基础 状态 , 作为 合 
并 hook .baseoueue 的 初始 值 (下 文 介绍 ). 


最 后 返回 [hook .memoizedstate， dispatch], 所 以 


在 function 中 使 用 的 是 hook .memoizedqstate， 


状态 更 新 
有 如 下 代码 :[imagej] 


Import React，{ useState } from "Teact ' 


export aqefault function ApP() { 


const [count，dqispatch]l = useState (0) ; 
Ceturn (人 
<eweeenm 
Oneielks= 位 份 旨 三 > 于 | 


esieEneelogg 人 a 忆 

Qis 让 ac) 

aiSSEEGC HE 近 
出 


Ceunt 


hoho 
) ; 


初次 壮 染 采 时 count 一 这 时 hook 对 象 的 内 存 状态 如 
下 : 


hook 初 始 化 


1 | baseQueue 
Fiber memoizedState Hook (state) da 人 | 


SR 9ueue 
enajng 


null 


worklnProgress @ -一 上 


memoizedState = 0 


baseState = 0 


点 击 button, 通过 ai spatch 因 效 进 行 更 
新 ，aispatch 实 际 就 是 dispatchAction: 


IonEEeii 和 eeETEeloyAenaEOESS 2 及 
flipexcr: ERiper， 
queue: UpdateQueue<S，A>， 
Gone ERAF 

) 
// 1. 创建 upqate 对 象 


Const eventTinme = fedquestEVentTime () ; 


const lane = fedquestUpdateLane (fiper) 


const update: Update<S，RA> = ({ 


// 


] 


aneyv 

EeeigE 
eagerRedquceLr 上 : nul1l， 
eagerState: nul1l， 
SeIEESR NO 同 辣 民 2 和 二 1 人 于 


] ; 


// 2. 将 update 对 象 添加 到 hook .queue .pending 队 了 
const pending = dueue.Ppendqing; 
If (Pendqing === nul1lL) { 
// 首 个 update， 创建 一 个 环形 链表 
update.next = update，; 
} else { 
Update.next = Penadqind.next， 
Penadqindg.next = upadqate，; 
} 


queue .Dendinda = updqate， 


const altetrnate = fipbper.altetrcnate， 
人 ( 
fipec === CUTEent1LYyRenadqeringEipbpeL | 
(alternate !== null && alternate === CUL1] 
县 
// 泻 染 时 更 新 ， 做 好 全 局 标记 


QidScheduleRenderPhaseUpdateDurindgIThisPas: 


} else { 


// .. .省 略 性 能 优化 部 分 ， 下 文 介绍 


// 3. 发 起 调度 更 新 ， 进 入 ` reconciler 运作 流程 : 


ScheduleUpdateoOnE ipber (fiber， 1Laney event 1 


逻辑 十 分 清 


1. 创建 upaate 对 象 , 其 中 upaate. lane 代 表 优 先 级 
(可 回顾 fiber 树 构造 (基础 准备 ) 中 
的 updaate 优 先 级 )， 

2. 将 upaate 对 象 添 加 到 hook .sueue .pending 环 形 


链表 . 


。 环形 链表 的 特征 : 为 了 方便 添加 新 元 素 和 快 
速 拿 到 队 首 元 素 ( 都 是 o(1)), 所 以 penaing 
指针 指向 了 链表 中 最 后 一 个 元 素 . 

。 链表 的 使 用 方式 可 以 参考 React 算法 之 链 


5. 发 起 调度 更 新 : 调用 ScheduleUpdqateoOnEiber， 
进入 reconciler 运作 流程 中 的 输入 阶段 . 


从 调用 schedquleUpdateonEiber 开 始 ， 进入 
了 react-reconciler 包 ， 其 中 的 所 有 逻辑 可 回顾 
reconciler 运作 流程 , 本 节 只 讨论 状态 Hook 相 关 逻 辑 . 


注意 : 本 示例 中 虽然 同时 执行 了 3 次 dispatch, 会 请 
求 3 次 调度 , 由 于 调度 中 心 的 节 流 优化 , 最 后 只 会 执 


ZX 二 AP : 定 六 
行 一 次 泻 染 


在 fibez 树 构造 (对 比 更 新 ) 过 程 中 , 再 次 调用 function， 
这 时 useState 对 应 的 函数 是 updateState 


function updateState<S> ( 
ETLSESEES 人 人) = 9 | 
)EIISRRDansEatcESREasmeSsEaeeAceTon 关 之 汉 | 呈 | 


return updateReducer (basicStateReducer， 


实际 调用 updateReducer. 


在 执行 upaateReducer 之 前 ，hook 相 天 的 内 存 结构 如 
下 : 


hook(baseQueue 拼 接 前 ) 


下 baseQueue 
curente Fiber .memoizedState Hook Stata -null 
<App/> [ 


Fiber memoizedState 
<App/> 


b; 
esecueue ul 


workInProgresse@ 和 


汲 交 儿 SEaeioDcieEheSNs ie se < SR 汉 
redqucer: (S，A) => S， 
可 EE 汪 AIS GE 本 和 下 
Ri ROLE 2 
ES DEREGR 全 :| 
// 1. 获取 workInProgressHook 对 象 
Const hook = updateWorkInProgressHook() ; 
Const Gdqueue = hook.dueue:; 
Gqueue .LastRenadqeredqRedqucer = edquceLr， 
GORSE 旺 CSEnRiE 有 Ook 全 e 放 世 骨 人 人 压 斑 smy) 7 


et baseoueue = current .baseOueue ，; 


// 2. 链表 拼接 : 将 hook.aqueue .pendqing 拼接 到 


const pendqingooueue = Gdqueue.pendqinad/; 
If (Penadqingoueue !== nulL1L) 1{ 
If (baseQueue !== mul1l1) { 
const baseFirst = baseoOueue .next，; 
Const pendqingFirst = Dendqindoueue .next:; 
baseQoueue .next = PenaingEirst，; 
Pendqingeueue .next = baseFirst:， 
】 
CuUrtrent .baseQueue = baseQoueue = pendqindei 
queue .Dendind = DulL1; 


】 
是 35 | 估 六 让 算 
If (baseQueue !== mul1) { 
Const first = baseQueue .next， 


et PnPnewState = CuUTrtent .baseState，; 


et PnPnewBaseState = nul1l'; 
et newBaseoOueueE1irst = nul1， 
et PnPnewBaseQueueLast = Pnul1l; 


eapPeoatee 三 得 人 JsS 蕊 ， 


5 人 | 
const updateLane = upadate.ane，; 
// 3.1 优先 级 提取 upaqate 
If (!1isSubsetoOofLanes (enadqerLanesy upadat 
// 优先 级 不 够 : 加 入 到 paseoueue 中 ， 等 待 下 


| 


Lane: upadateLaney 


ENEOReun 风 三 eeEIE SS 区 ECAEEIRein 


eagerReducer: update.eadgderReducer， 
eagerState: update.eagersStatel 
RS) 

} 1; 

If (newBaseQueueLast === DulL1lL) |{ 


newBaseQOueueE1irst = mnewBaseQOueueEL as 


newBasSsesState = mnewState， 
} else { 
newBaseQueueLast = PnewBaseQueueLast 
} 
CUTTent1LYyRenadqerinogEFiper .Lanes = meLrdj 
Current1LIYyRenadqeringFiper .Lanesyv 
updateLaneyv 


) 7 


markSkippedqUpdateLanes (updateLane ) ， 


} else { 
// 优先 级 足够 : 状态 合 ; 
If (newBaseQueueLast !== DulL1lL) |{ 
// 更 新 baseoueue 
Gonst Clone: Updqate<s，A> = { 


ane: NoLaneyv 
Eeeaeia ilooIENESR ELEIeio 
eagerReducer: update.eadgderReducei 


eagerState: update.eagerStatey 


ISRCIES ODASEIAANOR 
} 1; 
newBaseQueueLast = newBaseQueueLast 

) 

If _ (update.eadgqerReducer === fedqucer) 
// 性 能 优化 : 如 果 存 在 upqate .eagderRed 
newState = ((update.eagerState: ani 

} else { 

Const action = update .action'; 
// 调用 redqucez 获 取 最 新 状态 
newState = fedqucer (newStatey actior 


) 
Update = update.next， 
} while (update !== nullLl && update !== 工 : 


// 3.2. 更 新 属性 


If (newBaseQueueLast === DulL1L) { 


newBasesState = mnewState， 


} else { 

newBasecOueueLast .next = (newBaseQueueE : 
} 
If (!1s(newState hook .memoizedqState) ) { 


markWorkInProgressReceivedUpadate (|) ; 


】 

// 把 计算 之 后 的 结果 更 新 到 workInProgressHook 上 
hook .memolizedqState = newState， 

hook .baseState = newBasesState， 

hook .baseoueue = newBaseQOueueLast，; 


queue .LastRenadqeredState = newState， 


Const qispatch: Dispatch<A> = (queue.dqispat 


return [hook .memoizedqState，，qispatch]: 


updateReducer 攻 数 , 代码 相对 较 长 , 但 是 逻辑 分 明 : 


1. 调用 upaateworkInProgressHook 获 


取 workIinProgressHook 对 象 


2. 链表 拼接 : 将 hook .dueue .pending 拼接 


到 CUTTent .baseQueue 


hook(baseQueue 拼 接 后 ) 


本 
Fber memabedstale 本 二 
mamopedstale 邮 和 
人 <App re on adlon= 
人 和 memobedstale .国有 全 昌 。 5aseouee。 


3. 状态 计算 


1. update 优 先 级 不 够 : 加 入 到 baseQueue 
, 等 待 下 一 次 render 


2. update 优 先 级 足够 : 状态 合 # 


3. 更 新 属性 


hook( 状 态 计算 ) 


ourente .memolzedState -HHOoKEEG 司 -null 


性 能 优化 


QispPat chaAction 藤 数 中 ， 在 调 
用 scheduleUpdateonEFiber 之 前 ， 针对 upaate 对 象 做 
了 性 能 优化 . 


1 . Gueue .pending 中 只 包含 当 前 updqate 时 ， 即 当 


前 updqate 是 sueue.pending 中 的 第 一 人 upaate 


2. 直接 调用 sueue.1lastRenderedqReducer, 计 算 
出 upaate 之 后 的 state, 记 为 eagerState 

3. 如 果 eagerstate 与 currentstate 相 同 , 则 直接 
退出 , 不 用 发 起 调度 更 新 . 

4. 已 经 被 挂 载 到 sueue .pendqing 上 的 updqate 会 在 
下 一 次 render 时 再 次 合并 . 


VGNENIKONEeEES SEEGIOVAGNESROiOESRS 
fipecr: 了 Fiper， 
queue: UpdateQueue<S，A>v 
SCOTT 
Ji 
// .. .省 略 无 关 代 码 .. .只 保留 性 能 优化 部 分 代码 : 


// 下 面 这 个 if 判断 ， 能 保证 当前 创建 的 updqate， 是 `ah 


亚 表 区 
fiper.1anes === NoOLanes &K 
(ESIRWEUGS 二 二 EL | ERESNSWEIESSHLEIIISS 
| 
Const LastRenadqeredqReduce = dueue.1LastRer 
If (LastRenderedqReducer !== mul1l1) { 


Tet PrevDispatcher， 


Const CUrrentState: S = (queue.1astRen 


Const eagerState = LastRendqeredqReducer 


// 暂 存 `eagerReducer 和 `eagerState'` ， 如 和 


Update.eagerReducerr = astRenderedqRedu 


Update.eagerState = eadgqerState， 


If (Is(eadgerState CuUrrentState)) ({ 


// 快速 通道 ，eagerSstate 与 currentState 村 
// 注 : update 已 经 被 添加 到 了 sueue .bendqin 


etuCzDny， 


} 


// 发 起 调度 更 新 ， 进 入 ` reconciler 运作 流程 ` 中 的 硝 


ScheduleUpdateoOnE ipber (fiber， 1Laney evVentTin 


为 了 验证 上 述 优化 , 可 以 查看 这 个 demo:[image] 


异步 更 新 


上 述 示例 都 是 为 在 regacy 模 式 下 , 所 以 均 为 同步 更 
新 . 所 以 upaate 对 象 会 被 全 量 合 并 ,hook .baseoueue 
和 hook.basestate 并 没有 起 到 实质 作用 . 


虽然 在 v17 . x 版 本 中 ， | 
即将 发 布 的 v18s .x 版 本 将 全 面 进入 异步 时 代 , 所 以 本 
本 让 CE ED SS | 二 同时 加 


;) 宁 hook 5 baseoueue 和 hook 是 basestate 的 理解 . 


假设 有 一 个 sueue .pending 链 表 ， 其 中 upaqate 优 先 级 
不 同 ， 绿 色 表示 高 优先 级 ， 灰 色 表示 低 优先 级 ， 红 色 表 
示 最 高 优先 级 . 


在 执行 updateRedqucer 之 
前 ， hook .memoizedState 有 如 下 结构 (其 
中 upaate3， update4 是 低 优先 级 ): 


hook(tbaseQueue 拼 接 前 ) 


Fibt memoizedSiate baseQueue 


链表 拼接 : 


四 和 同步 更 新 时 一 致 ， 直接 把 sueue.pending 拼 接 


到 CUTTent .baseQOueue 


hook(baseQueue 拼 接 后 ) 


b 
Fihber 。 .memoizedState 、HOoK etat 。 _baseQueue 


workinProgresse， 。 -App 


状态 计算 : 


current 


workinProgresse -APEA 


只 会 提取 updaate1l，update2 这 2 个 高 优先 级 
的 upaate, 所 以 最 后 memoizedqstate=2 

保留 其 余 低 优先 级 的 upaate, 等 待 下 一 

次 render 

从 第 一 个 低 优先 级 upaate3 开 始 , 随后 的 所 

有 upadate 都 会 被 添加 到 baseoueue， 由 

于 update2 已 经 是 高 优先 级 , 会 设 

置 upaate2 .Lane=NoLane 将 优先 级 升级 到 最 高 
(红色 表示 ). 

而 basestate 代 表 第 一 个 低 优先 级 update3 之 前 
的 state， 在 本 例 中 ， baseState=1 


hook( 状 态 计算 ) 


rmemoizedState 。HOoK Stat) queue.pending 


Fibe 
<App/> 剖 


ee 一 


Fiber .memoizedState Hook stata 。 queuepending 


function 节 点 被 处 理 完 后 , 高 优先 级 的 update, 会 率 


先 被 使 用 (memoizedqstate=2). 一 段 时 间 后 , 低 优先 


级 updaate3，update4 符 合演 染 , 这 种 情况 下 再 次 执 


行 updaateReducez 重 复 之 前 的 步骤 . 


链表 拼接 : 


由 于 cueue .pending = nul1l， 故 拼 接 前 后 没 
实质 变化 


hook(baseQueue 拼 尝 ) 


curente > memokadStats queue .pending 


- Hook (state) 


null 


Fiber 
<App/> 


Fiber memoizedState 
kinP， ee De - 
workinProgress ， 全 


状态 计算 : 


现在 所 有 upaate lane 都 符合 泻 染 优先 级 ， 所 以 
最 后 的 内 存 结构 与 同步 更 新 一 致 


(memoizedState=4 baseSstate=4). 


hook( 状 态 计算 ) 


ji b 
二 交 memoizedState SR 洒 。 baseQueue nul 


9ueu 

e 

Denoy， 

ea 

蕊 3 
baseState = 1 


memoizedState = 4 
baseState = 4 


了 9 null 
que- 一 


current @ -一 一 


Fiber memoizedState baseQueue 
<App> Hook (state 一 ~null 


worklnProgress @- 估 


结论 : 尽管 updaate 链 表 的 优先 级 不 同 ， 中 间 ] 


的 renaer 可 能 有 多 次 , 但 最 终 的 更 新 结果 等 

于 updaate 链 表 按 顺序 合并 . 
总 结 
本 节 深 入 分 析 状 态 Hook 即 usestate 的 内 部 原理 ， 
从 同步 ,异步 更 新 理解 了 upaate 对 象 的 合并 方式 , 最 
终结 果 和 存储 在 hook memoizedqstate 供 给 function 使 
用 . 


Hook 原理 (副作用 Hook) 


原文 : https:W/github.com/7kms/react- 
川 ustration-series/blob/main/docs/main/hook- 
effect.md 


title 
Hook 原理 (副作用 Hook) 


本 节 建 立 在 前 文 Hook 原理 (概览 ) 和 Hook 原理 (状态 
Hook) 的 基础 之 上 , 重点 讨 


论 useEffect useLavyoutEaffect 等 标准 
的 副作用 Hook. 


创建 Hook 


在 fiber 初 次 构造 阶段 ， useEgffect 对 应 源码 
mountEffect，useLavyoutEffect 对 应 源码 
mountLayoutEffect 


moOuntEffect: 


Meieien 硬 me ec 


GT 下 ES 人 作 下 三 过 人 人 惠 三 之 ZOL oO) NAeae 区 
deps: Array<mixed> | void | nul1， 
ECORGE 


zetuzn mountEffectImPD]1 (人 
UpdateEffect | PassiveEffect，// fiberE1a 
HookPassive，// hookF1ladgs 
CEeateyv 


Qqeps， 


mountLayoutEffect: 


function mountLayoutEffect ( 


GASa 忆 S 有 全 之 全 从 三 之 瑟 ON) NAeiaKe 攻 
eSATAV< mixeG ED 
) 划 -ZONG 


zetuzn mountEfEfectImP1( 
UpdateEffect，// fiperEFlags 
HookLayout，// hookFlads 
CEeatey 


Qeps， 


可 见 mountEffe ct 和 mount 工 ayoUutEfEfect 内 部 都 直接 
调用 mountEffectlImpl, 只 是 参数 不 同 . 


mountEffectImP1: 


function mountEffectImPD1L (fipecElags， hookE1ac 
// 1. 创建 hook 
Const hook = mountWorkInProgressHook (|) ; 
Const nextDeps = qeps === Unaqefineaq ? nul1l 
// 2. 设置 workInProgress 的 副作用 标记 
CUTrLTent TYyRendqeringEiper .flags 医 下 LpeE1ads 
// 2. 创建 Effect， 挂 载 到 hook .memoizedState 上 
hook .memoizedState = PushEffect ( 
HookHasEffect | hookElags，// hookFlags 用 
CEeateyv 
unadqefined， 


mextDepsy， 


moOUunt 上 Effect Imp1 逻 辑 : 


1. 创建 hook 
2. 设置 workInP Erodqress 的 副作用 标 


记 : flags |= fiberElags 
3. 创建 effect( 在 pushEffect 中 )， 挂 载 
到 hook.memoizedstate 上 ， 


即 hook .memoizedqState = effect 


屋 : 状态 Hook 中 hook .memoizedSstate 一 _ State 


创建 Effect 


PushEffect: 


function PushEffect (ad create qdqestroy， det 
// 1. 创建 effect 对 象 
Const effect: Effect = { 
tagyv 
CEeatey 
Qestzroyyv 
QqepPs， 
ISSUESEEONO 大 
} 1; 
// 2. 把 effect 对 象 添加 到 环形 链表 末尾 
et _ componentUpdqateQueue: nul1 EunckioncC' 
IE (componentUpadqateQueue === mulL1L) 1{ 
// 新 建 workInProgress .updateoueue 用 于 挂 寿 


ComponentUpdatecueue = CreateFEunctioncCormk 


} 


Curent1LIYyRenadqeringEFiper.updateQueue = (cc 
// updateoueue .lastEaffect 是 一 个 环形 链表 
ComponentUpdatecueue .astEftfect = effect. 


else { 
Const LastEffect = ComponentUpdateQueue . - 
If (1LastEffect === mulL1) { 


CompPonentUpadateeQueue .astEffect = effec 
} else { 

Const fitrstEffect = LastEffect.next， 

astEffect .next = effect，; 

effect.next = ficstEffect ， 

CompPonentUpadateQueue .上 astEffect = effec 


// 3. 返回 sffect 


Ceturn eftfect，; 


pushEffect 逻 辑 : 


1. 创建 effect. 
2. 把 effect 对 象 添加 到 环形 链表 末尾 . 


3. 返回 effect. 


effect 的 数据 结构 : 


exPort typPe 卫 ffect = {| 
IEEieaeielsaneieF 


Geaeee 人 本 三 汉 汪 位 从 汪 三 之 CC NAGTEGIE 
Qqestroy: (() => Volid) Guiee 
Qqeps: ArFay<mixed> 机 加 避 量 本 


nexXt: Effecty， 
中 


。effect .tag: 二 进 制 属性 , 代表 effect 的 类 型 
(源码 ). 


exXxpPort const NoFElLags = /* */ 0b000) 
exPort const HasEffect = /x*x */ 0b00L[L; 
eXPort const Layout = /r* Oo0D ， 


eXPort const Passive = /xx 0eop ，; 


中 effect .create: 实际 上 就 是 通过 usepgffect () 


所 传 入 的 函数 . 


。effect .deps: 依赖 项 , 如 果 依 赖 项 变动 , 会 创建 
新 的 effect. 


rendqerWwithHooks 执 行 完 成 后 , 我 们 可 以 画 
出 fiber,hook,effect 三 者 的 引 用 天 系 : 


Effect Hook (renderWithHooks) 


人 LPlace | 

人 iu flags Fiber 
<Ubdate 二 一 

盖 - <App/> 
<Passive | 


memoizedState 


站 

1ag 
4Layout | 全 
Layou N 


生 
memoizedState 。 Hook 
-下 sse 一 (LayoutEffecht) 


曲 人 


next 
站 | 
。 区 
<Passive | ee ， 
和 AN next 
\! | 
| 
memoizedState Hook 
下 se 一 全 ” 人 (Effecb) 


deps 


/ next 
A- So 站 


] 乒 S Ts 是 
cPassive ] N 


1 


SN L 
memoizedState Hook 
<- effect -- (Effecb) 


现在 workInProgress.flags 被 打上 了 标记 , 最 后 会 
在 fiber 树 泻 染 阶 段 的 commitRoot 图 数 中 处 理 . (这 期 
间 的 所 有 过 程 可 以 回顾 前 

文 fiber 树 构造 /fiber 树 泻 染 系列 , 此 处 不 再 玫 述 ) 


UseEffect & useLayoutEffect 


站 在 fiber,hook,effect 的 视角 , 无 需 关 心 这 个 hook 
是 通过 useffect 还 是 useLavoutEffect 创 建 的 . 只 


需要 关心 内 部 fiber. fladqsieffect . tag 的 状态 . 


所 以 useEgffect 与 useLayoutEffect 的 区 别 如 下 : 


在 


一 人 


fiber.flags 不 同 


使 用 useEffect 

时 : fiper.flags = UpdateEffect 
使 用 useLayoutEffect 

时 : fiper.flags = UpdqateEffect， 
. effect .tag 个 同 

使 用 useEffect 

时 : effect .tag = HookHaSEffect 
使 用 useLavyoutEffect 

时 : effect .tag = HookHaSEftfect 


PassiveEffect 


HookPassiVe. 


| HookLayout. 


处 理 Effect 回调 


完成 fibezr 树 构造 后 ， 远 辑 会 


树 交 染 中 的 介 引 


进入 泻 染 阶 段 . 通过 fiber 
召 , 在 commitRootImp1 国 数 中 , 整个 泻 


染 过 程 被 3 个 函数 分 布 实现 : 


1. commitBeforeMutationEffects 
2. commitMutationEffects 
3. commitLayoutEffects 


这 3 个 函数 会 处 理 fiber.flags, 也 会 根据 情况 处 


理 fiber.updateoueue .1LastEffect 


commitBeforeMutationEffects 


第 一 阶段 : dom 变更 之 前 , 处 理 副作用 队列 中 达 


有 Passive 标 记 的 fibezr 忆 点 . 


function commitBeforeMutationEftftects() |{ 
while (nextEffect !== mul1) { 
// .. .省 略 无 关 代 码 ， 只 保留 Hook 相 关 


// 处 理 `Passive'` 标 记 
GeomsE 且 和 iaioiS 本 三 本 内 全 文 巧 辣 信 全 CE 人 | aiS7 


If ((flags & Passive) !== NOE1Ladgs) { 
If (!rootDoesHavePassiveEftfects) { 
xzootDoesHavePassiveEffects = 七 Tue，; 


schedqduleCcal1lpack (NormalScheadulLecrPrioi 
flushPassiveEffects () ， 


SEO 


mexXtEffect = mexXtEffect .nextEffect， 


注意 : 由 于 flushPassiveEffects 被 包 右 
在 schedqulecallback 回 调 中 ， 由 调度 中 心 来 处 理 ， 且 
参数 是 NormalschedqulerPriority, 故 这 是 一 个 异步 


回调 (具体 原理 可 以 回顾 React 调度 原理 
(Schedulerm)). 


由 


于 schequlecal1lback ( NormalSchedu1LerPriorityr calL1lbac 
是 异步 的 ， flushPassiveEgffects 并 不 会 立即 执行 . 

此 处 先 跳 过 flushPassiveEgffects 的 分 析 ， 继续 跟 

进 commitRoot. 


commitMutationEffects 


第 二 阶段 : dom 变更 , 界面 得 到 更 新 . 


NICOEECSOminaieME ass 人 本 外 信 全 这 世 s 这 


ColeeeRoot 
zenaqerPriorityLeve1l: ReactPriorityLevel， 
) 
// .. .省 略 无 关 代 码 ， 只 保留 Hook 相 关 
while (nextEffect !== mnul1l) { 
Const flags = mextEffect .flags， 
Const PrimaryFlags = flagqs & (Placement 
Swaechercma yoSD 
case Update: { 
// useEgffect,useLayoutEffect 都 会 设置 Ur 
// 更 新 节点 
CoOnst CUTTent = mexXxtEffect .alternate， 
CommitWork (Curent，PnextEffect) ， 


Dreak， 


】 
DexXtEffect = mexXtEffect .nextEffect，; 


人 UTCGten 王 CEeinmnaiteNWoeR (Eee Ross 7 于: 
// .. .省 略 无 关 代 码 ， 只 保留 ook 相 关 
SweeteonaoshnheaWosEseaoh 天 | 

case FunctionComponent : 
CaSse ForwardqRerf : 

case MemoComPponent : 

case SimpleMemoComponent : 


Case BlLlock: { 


// 在 突变 阶段 调用 销毁 级 数 ， 保证 所 有 的 sffect . 
CommitHookEffectListUnmount (HookLayout 


SS ED 的 


// 依次 执行 : effect .destroy 
人 CD 本 COmniaae 有 ROGEREEEE 人 机 moORLEESG: moar 
const _ updateQueue: EunctionCcomponentUpadate 
Const LastEffect = updateQueue !== DullLl ? :1 
3 全 90EIRLS IE 三 二 ODN 
Const fitrstEffect = LastEffect.next， 
et effect = ficstEffect，; 
fei 
If ((effect .tag & 七 ag) === 七 ag9) { 
// 根据 传 入 的 tag 过 滤 _ effect 链表 . 


Const adqestroy = effect.dqestroy，; 


effect.dqestroy = unadefined; 
If (qdqestroy !== unaefined) { 
gesensoN 二 区 
} 
】 
effect = effect.next， 


}) while (effect !== firstEffect) ，; 


调用 天 


系 : CommitMutationEfftects->commitWork->commitHookE 


。 注意 在 调 
用 commitMutationEffects (HookLayout | HookHasE1: 
人 参数 是 HookLavonut HOoOKkHaSEffect， 所 以 只 
处 理由 useLayoutEffect () 创建 的 effect. 
。 根据 上 文 的 分 
析 HookLayout HookHasEffect 是 通 
过 useLavoutEffect 创 建 的 sffect. 所 
以 commitMutationEffects 国 数 只 能 处 理 
由 useLavoutEffect () 创建 的 sffect. 


。 同步 调用 effect .qestroy () . 


commitLayoutEffects 


第 三 阶段 : dom 变更 后 


function commitLayoutEffects (oot : ERiberRoot， 
// .. .省 略 无 关 代 码 ， 只 保留 Hook 相 关 
while (nextEffect !== nul1lL) { 
Const flags = mextEfftect .flags， 
下 ES SSEE 汪 攻 ea 册 5 于 | 
// useEgffect,useLayoutEffect 都 会 设置 Upda 


Const CuUrrent = mextEffect .alternate，; 
Goesae ER 有 eetEOnEioec oa enrrent 


】 
nexXtEffect = mexXtEffect .nextEffect，; 


EeenEEeenmnateEEEECYeTTE SEE 
finishedqRoot : PERipbperRocot， 
| 
finishedqNWork : PEipery， 
committedLanes: Lanesy 
JR NAealea 
// .. .省 略 无 关 代 码 ， 只 保留 Hook 相 关 
Switch (finisheaqNWork .tag) ({ 
case FunctionComponent : 
CaSse ForwardRerf : 
case SimpleMemoComponent : 
Case BlLlock: { 
// 在 此 之 前 commitMutationEgffects 国 数 中 ，s 
CommitHookEffectListMount (HookLayout 


SchedulePassiveEffects (finisnhedqNWork ) ， 


etuznmny， 


function commitHookEffectListMount ( 蕊 aag: numlps 
const updqateQueue: FunctionCcomponentUpdate 
Const LastEffect = updateQueue !== DullLl ? :1 
人 三 
Const firstEffect = LastEffect.next; 
et effect = ficstEffect， 
Ge 
If ((effect .tag & 革 agd) === 七 ag9) { 
Const create = effect .create，; 
effect.qestroy = Create () ; 


effect = effect .next，; 
} while (effect !== fixstEffect) ， 


1. 调用 关 


系 : CommitLayoutEffects->commitLayoutEffectoOnE 


。 注意 在 调 
用 commitHookEffectListMount (HookLayout | HookE 
人 参数 是 HookLavonut HookHasEffect, 所 以 只 
处 理由 useLayoutEffect () 创建 的 effect. 

本 调用 effect .create() 之 后 , 将 返回 值 赋 值 


到 effect.dqestroy、 


1. 为 flushPassiveEffects 做 准备 


commitLifecycles 中 
的 schedqulePassiveEffects (finisheqWork)， 
其 形 参 finishedqwork 实 际 上 指 代 当 前 正在 
被 遍历 的 有 副作用 的 fiber 


但 schedqulePassiveEgffects 比 较 简 单 , 就 是 
把 带 有 Passive 标 记 的 effect 筛选 出 来 
(由 useagffect 创 建 )， 添加 到 一 个 全 局 数组 


(bendqingPassiveHookEffectsUnmount 和 pendina 


function SchedulePassiveEftfects (finis 
// 1. 获取 fiber.upcdateoueue 
Const updqateQueue: EunctioncCcomponen 
// 2. 获取 effect 环 形 队列 
Const LastEffect = updateQueue  !== 
上 二 本 (全 ES 全 人 已 本 下 三 三 汪 记 (ON 区 让 
Const firstEffect = astEffect .ne 
et effect = ficstEffect， 


le 
GOis 世 (ex 芭 对 寺 且 三 汪 全 在 长 人 c 七 ; 
// 3. 筛选 出 由 useEffect () 创建 的 `e 
于 SN 


(tad9 & HookPassive) !== NoHoc 


(七 a9 & HookHasEffect) /= NoB 
六 4 
// 把 sffect 添 加 到 全 局 数组 ， 等 待 
endqueuePenadingPassiveHookEffe 
endqueuePenadingPassiveHookEffe 
} 
effect = PmexXt，; 
} while (effect !== fixcstEffect) ， 


expDort function endqueuePendingPassivVe 
fiper: ERipery， 
effect: HookEffecty， 

GE 
// unmount effects 数组 


PenadqingPassiveHookEffectsUnmount .Pu 


expDort function endqueuePendingPassivVe 
Eeens Eee 
effect: HookEffecty， 

JSAeaweE 
// mount effects 数组 
PendqingPassiveHookEffectsMount .Pusnh 


综 上 commitMutationEffects 

和 commitLayoutEffects2 个 函数 ， 带 有 Layout 标 记 
的 effect( 由 useLayoutEffect 创 建 )， 已 经 得 到 了 完 
整 的 回调 处 理 (aestroy 和 和 create 已 经 被 调用 ). 


如 下 图 : 其 中 第 一 个 eftfect 拥 有 Layout 标 记 , 所 以 


有 effect.dqestrovy () ; effect .Qqestroy = effect .Create 


Effect Hook (commitLayoutEffects) 


LUpdate | 一 9 


<Passive | 


4 memoaoizedState 


罗 
儿 Layout ， 于 本 局 


SS 
memoizedState Hook 


-下 Esc “”(LayoutEffec) 


next 
<Passive 名 | 
ee 愉 next 
1 
”memoizedState  。 Hook 
<。 effect 一 人 一 (Effect) 
deps | 
next 


so 


Passive 人 / 
Case | 


SN UL 
memoizedState Hook 
<- effect -一 (Effecb) 


flushPassiveEffects 


在 上 文 commitBeforeMutationEffects[ 介 段 ， 异步 调 
用 了 flushPassiveEffects. 在 这 期 间 带 有 Passive 
标记 的 effect 已 经 被 添加 


到 pendingPas SIVeHookEffectsUnmount 


和 pendqingPassiveHookEffectsMount 全 局 数组 中 . 


接 下 来 tlushPassiveEffects 就 可 以 脱离 fiber 节 点 ， 
直接 访问 sffects 


expDort function flushPassivVeEffects () : boole: 
// Returns whether passive effects were fl 
If (PendqingPassiVeEffectSsRendqer 上 PtrioriLyYy !=: 

Const PriorityLevel = 
PenadqingPassiveEftfectsRenadqerPriority > 

?2 NormalLlSchedqulLlerPrior1ItYy 
PendqingPassivVeEffectsRendqe 上 PiorIt' 
PenadingPassiVeEftfectSsRendqer 上 Prior1itY = 三 NO 
//、`zunWithPriorit 六 设置 Schedule 中 的 调度 优 儿 
zeturn CunwWithPzriority (PEziorityLevelL，E 工 1 
} 


Ceturn false，; 


// .. .省 略 无 关 代 码 ， 只 保留 Hook 相 关 
CERGOT 人 及 aS SIVe 全 作息 攻 SEmEIERI 司 | 
IE (footWithPenadqingPassiveEffects === mulLI) 
Ceturn false，; 
} 
rootWithPenadqinoPassiveEftfects = nul1l; 


PendqingPassiveEftfectsLanes = NoLanes， 


性 庆 何 星 人 站 有 二 且 让 本 全 全 全 9 天 从 

Const unmountEffects = PendqingPassiVeHookE1: 

PendqingoPassiveHookEffectsUnmount = []); 

for (let = 0;) 1< unmountEftftects.lLength，; 
Const effect = ((unmountEfftects [1]: any) : 
Goes 合生 基于 三才 (ii 忽而 而 臣 责 信和 包 攻 S 辣 |] : al 
Const aqestroy = effect.aqestroy; 
effect.dqestroy = unadefined' 
IfE _ (typeof aqestroy === "function") [{ 

Qestroy () ; 


// 2. 执行 新 effect.create()， 重 新 赋值 到 sffe 
Const mountEffects = PenadqingPassiVeHookEffs 
PendqingoPassiveHookEffectsMount = []，; 

仆人 全 且 本 三 汪汪 iiG 和 蕊 本 企 作 他 长 SITENOIEPR) 工 


Const effect = ((mountEfftects [1I]: any): 
GeomsE 全 ie 三 关心 人 GD 大 区 全 人 总 本 二 | 向 二 十 串 |: 二 Y)) 
effect.dqestroy = Create () ; 


其 核心 逻辑 : 


1. 遍历 pendqingPassiveHookEffectsUnmount 中 


的 所 有 effect， 调用 effect .aestroy () . 


。 同时 清 
空 pendqingPassiveHookEffectsUnmount 
3. 遍历 pendqingPassiveHookEffectsMount 中 的 所 
有 effect， 调用 effect .CIreate () ， 并 更 


新 effect .Qestroy， 


。 同时 清 


2 2 ， 
全 PenaqlngPass1LIVeHookEffectSsMount 


所 以 ， 宙 有 Passive 标 记 的 effect， 
企 flushPassiveEffects 国 数 中 得 到 了 完整 的 回调 
处 理 . 


如 下 图 : 其 中 拥有 Passive 标 记 的 effect, 都 会 执 


行 sftfect .destrovy () ; effect .Qqestroy = effect .Create 


Effect Hook (flushPassiveEffects) 


< 有 flags Fiber 


Se <App/> 


人 es) 


memoizedState 


ED 


1 二 
和 Layout 。 人 o 


create 


Hook 
“(LayoutEffeci) 


memoizedState 


memoizedState  。 Hook 


1/ next 


<Passive | / 


本 -7 关 
/ 


辣 
create yd 


memoizedState  。 Hook 


更 新 Hook 
假设 在 初次 调用 之 后 , 发 起 更 新 , 会 再 次 执 


行 Eunction， 这 时 function 只 使 用 
的 useEffect， useLayoutEffect 等 api 也 会 再 次 执 


一 


伍 . 


在 更 新 过 程 中 usezffect 对 应 源码 
updateEffect，useLayoutEffect 对 应 源码 
updateLayoutEffect. 它 们 内 部 都 会 调 

用 upaateEffectImpl, 与 初次 创建 时 一 样 , 只 是 参数 
不 同 . 


更 新 Effect 


UpdateEffectlmpl: 


function updqateEffectImPp1L (fiperElags，， hookF1: 
// 1. 获取 当前 hook 
Const hook = updateWorkInProdgressHook () ; 
Const nextDeps = qeps === Undefinedaq ? nul1l 
Jet aqestroy = unadefined' 
// 2. 分 析 依 赖 
If _ (CurrentHook !== mnul1lL) { 
Const PrevEffect = CuUrLentHook .memoizedsSt 
// 继续 使 用 先前 effect .destroy 
Qestroy = PrevZEffect .aestroy，; 
If _ (nextDeps !== nulL1L) 1{ 


Const prevDeps = PrevZEffect.dqeps:; 

// 比较 依赖 是 否 变化 

IE (areHookInpPputsEdual (nextDeps， PrevD 
// 2.1 如 果 依 赖 不 变 ， 新 建 effect (tag 不 含 8 
PushEffect (hookFJags，， create qdqestroi 


三 e 七 wz， 


】} 
// 2.2 如 果 依 赖 改变 ， 更 改 fiber.flag， 新 建 sffec 


CUTrLTent TYyRendqeringEiper .flags | 全 下 LpecE]ads 


hook .memoizedState = PushEffect ( 
Heekias 下 Eeece hookPlags， 
CEeateyv 
G@esienoy 
mextDeps， 


) 7 


updateEffectlImpl 与 nountEffectlmpl 逻 辑 有 所 不 同 : 
-如果 useagffect/useLavyoutEffect 的 依赖 不 变 , 新 
建 的 effect 对 象 不 带 HasEffect 标 记 . 


注意 : 无 论 依赖 是 否 变化 , 都 复 用 之 前 


的 effect . QqestLroy， 等 待 commitRoot 阶段 的 调用 (上 


文 已 经 说 明 ). 
如 下 图 : 


。 图 中 第 1,2 个 hook 其 aeps 没 变 , 故 effect .tag 
中 不 会 包含 HookHasEffect. 

必 图 中 第 3 个 hook 其 aeps 改 变 ， 故 sffect .tag 中 
继续 含有 HookHasEffect. 


Effect Hook (after renderWithHooks) 


worklnProgress Current 
? [ 
Y y 
Fiber co .< 全 天 站 Update |- 。 
<Appy/ 人 > assive | 记 
AAA Passive | RN 区 
Se keD 
se El 
Te 2 emdzeds 
iemoizedsi ne 
oa 一 人 Go 
S\ 有 5 
create create 0 
没 izedStatt look 
必 和 memoizedState SR .| |deps 没 变 . 和 memoizedState 一 攻 汪 于 全 
deps deps 人 
ndt esErect] 汪 
/ | Casej、。 
| 9 sa ] 
4 | 1 医 过 出 
没 变 | | 上， net memoizedStah Hool 
上 memoizedState 本 |deps 没 变 有 2 memoizedState 站 攻 
本 | sm 
next 
加 
| 一 oo 一 | zedStat iook 
| memoizedState 属 二 到 effect 。 memolzedState 
上 


处 理 Effect 回调 


新 的 hook 以 及 新 的 sffect 创 建 完 成 之 后 , 余下 远 辑 
与 初次 泻 染 完 全 一 致 . 处 理 Effect 回调 时 也 会 根 
据 effect .tag 进 行 判断 : 只 有 effect .tag 包 


含 HookHasEgaffect 时 才 会 调用 effect .QestLroy 


和 effect.create1() 


组 件 销毁 


当 function 组 件 被 销毁 时 ， fiber 节 点 必然 会 被 打 
上 peletion 标 记 , 即 fiber.flags | = Deletion. 带 
有 peletion 标 记 的 fiber 在 commitMutationEffects 


被 处 理 : 


// .. .省 略 无 关 代 码 
EGG EommiiieaMa 记 下 已 而 本 上 全 人 eetESsi 
OCSeRGOE 
zenaqerPriorityLeve1l: ReactPriorityLevel， 
) 
while (nextEffect !== mnul1) 1{ 
Const PrimaryFlags = flagqs & (PLacement 
SWwEEchaiersm ayEE SGSI 
case Deletion: ({ 
CommitDeletion (oot，，， nexXtEffect， en 


Dreak， 


在 commitDeletion 耻 数 之 后 , 继续 调 

用 unmountHostcomponents->commitUnmount, 在 
commitUnmount 中 , 执行 effect .destroy() ,结束 
整个 财 环 . 


本 节 分 析 了 副作用 Hook 从 创建 到 销毁 的 全 部 过 程 ， 

在 react 内 部 , 依靠 fiber.flags 和 effect .tag 实 现 
了 对 effect 的 精准 识别 . 在 commitRoot 阶 段 , 对 不 同 
类 型 的 effect 进 行 处理 , 先后 调 


用 effect.destroy() 和 effect.create ()， 


React Context 原理 


原文 : https:W/github.com/7kms/react- 
川 ustration-series/blob/main/docs/mainm/ 
context.md 


title 
context 原理 


简单 来 讲 ，context 提 供 了 一 种 直接 访问 祖先 节点 上 
的 状态 的 方法 , 避免 了 多 级 组 件 层 层 传递 props， 


有 关 context 的 用 法 , 请 直接 查看 官方 文档 , 本 文 将 
从 fiber 树 构造 的 视角 , 分 析 context 的 实现 原理 . 


创建 Context 


根据 官 网 示例 ， 通过 React createCcontext 这 个 api 
来 创建 context 对 象 . 在 createContext 中 , 可 以 看 
到 context 对 象 的 数据 结构 : 


exXxpPort function createContext<I> ( 


aqefaulItValue: 工 ， 
calculatechandedqBits: ?(a: TI，b: I) => nurmL 


ReactContexXxt<T> { 


班 记 


} 


(calculatechandedqBits === unaqaefinedq) { 


calculatechandedqBits = Pul1l; 


COnis 人 GEeE 芝 RSacCECOne 芝 有 T 莹 下 三 于 
$SStypeof: REACT_CONTEXT_TYPE， 
_calculatechangedqBits: calculatechangedB: 


刀 
类 : 
ZL 
/ 居 


As a Workarounad to Support multiple cc 
Some Lenadqerers as Primary and others : 
七 nece 七 O pe twoO Concurtent Lrcenderers : 
Eapbric (secondqary); React DOM (PiImar' 


Secondary Trendqerers store 七 neir Conte: 


_CUTEentValue: dqefaultValLueyv 


_CUTEentValue2: qefaultValuey 
SS=ielGeiiaueeanb 


BGAEelere GUIREEmSN 二 本 
人 GPS 让 We (公民 ESTANO 于 
] ; 
CoOntext .PEOoviader = { 


] ; 


SStypeof: REACT_PROVIDER_TYPE， 


Cemieexsee eeGEEEE 


Context .ConSumer = ContexXt， 


从 SIEbnegRexeloue ae 


createCcontext 核 心 逻 辑 : 


。 其 初始 值 保存 在 context ._ currentvalue( 同 时 
保存 到 context ._CUTTentValLue2. 英文 注释 已 
经 解释 , 保存 2 个 value 是 为 了 支持 多 个 泻 染 
器 并 发 这 染 ) 

。 同时 创建 
了 context .ProvViader，Ccontext . Consumer2 


个 reactElement 对 象 . 


比如 , 创 | 


建 const MyContext = React .createContext (aefaultVal 


之 后 使 


用 <Mycontext .Provider value={/x 其 个 值 */}> 声 


明 一 个 contextProvider 类 型 的 组 件 . 


在 fibez 树 泻 染 时 ， 在 beginwork 中 contextProvider 
类 型 的 节点 对 应 的 处 理 浮 数 是 
updateContextProvider: 


function bedginWork ( 
ER 
WOLTKInProdgtress: ERiper， 


CendqerLanes: Lanesy， 


) 


FEIbpeL 5 辣 辐 国 忆 | 
const updateLanes = WOTKIDProdgress .anes，; 
WOrKIDProgress.lanes = NoLanes， 
// .. .省 略 无 关 代 码 
Switch (workInProdgress.tag) { 
Case ContextProvZiader: 
retutrn updateContextProvidqer (CuUrrent， 
GasSe 本 Coemtexeeoenmsumene: 


zeturn updatecContextConsumer (Curenty， 


function upadqateContextProviader ( 


Seeni 是 | 医 Di 昌 
WOLTrKInProdgtress: Eibpery， 
zendqerLanes: Lanesy， 

{ 

// .. .省 略 无 关 代码 


Const ProvidqerIType: ReactProviderTypPeK<any> 


Const Context : ReactContext<any> = Providei 


Const newProps = WOTrKInProdgtess .PendqingProtk 


GOGIs 本 有 ldEeeios 
// 接收 新 value 


Const PhnewVvValue = newProps .Value:， 


// 更 新 ContextProvider. currentValue 


PushProvidqer (workInProdgress，newvalLue) ; 


WOLTKIDPEogtress .memoizedQPL 


人 (CGI RE 全 ESRLE 三 OIL E 
// .. .省略 更 新 context 的 逻辑 ， 下 文 讨 论 


Const newchildren = newProps.childrenl'; 
reconcilechildqren(current，，workInProdgressy 


einWCKEOREEOoeEeSS 本 Ca 


updateCcontextProvider() 在 fibezr 初 次 创建 时 十 分 
简单 , 仅仅 就 是 保存 了 penqingProps .value 做 

为 context 的 最 新 值 , 之 后 这 个 最 新 的 值 用 于 供给 消 
费 . 


context，currentValue 存储 


一 zs ， 
) 王 瑟 updqateContextProvidet 一 > pushProvider 中 


的 pushProvider(worklnProgress, newValue): 


// .. .省 略 无 关 代码 

expDort function PushProvider<IT> (ProviaderEFibeia 
Const Context : ReactContext<T> = PEOVZiaerE: 
Push (valueCursor，， context . CurrentValue， Pi 


ContexXxt ._CUrrentValue = mnextValLue，; 


pushProvider 实 际 上 是 一 个 存储 组 数 , 利用 栈 的 特 
性 , 先 把 cocntext._currentvalue 讨 栈 , 之 后 更 


新 context .currentValue = mextValLue. 


与 pushProvider 对 应 的 还 有 popProvider, 同样 利 
用 栈 的 特性 , 把 栈 中 的 值 弹 出 , 还 原 


到 ContexXxt ._CUTrTEentValLue 中 . 


本 节 重 点 分 析 context Api 在 fiber 树 构造 过 程 中 的 
作用 . 有 关 pushProviadqer/popProvider 的 具体 实现 
过 程 ( 栈 存 储 ), 在 React 算法 之 枝 操 作 中 有 详细 图 解 . 


消费 Context 


使 用 了 Mycontext . Providqer 组 件 之 后 ， 
在 fiber 树 构造 过 程 中 , context 的 值 会 
ee 型 的 fiber 节 点 所 更 新 . 在 后 


续 的 过 寸 程 中 ， 如 何 读 取 context . _currentValue? 
在 react 中 , 共 提 供 了 3 种 方式 可 以 消费 context: 


1 . 使 用 Mycontext consumer 组 件 : 用 于 sxX. 


如 ， <MyContext .Consumer> (Value)=>{}</MyContexXt 


。 beginwork 中 , 对 于 contextconsumer 类 型 
的 节点 , 对 应 的 处 理子 数 是 
updateContextConsumer 


function upadqateContextConsumerL ( 
CE SEO 
WOLTKIDnProdtress: ERipbper， 
zendqerLanes: Lanesy， 
| 
et Context : ReactContext<any> = WoOrKIT 
Const newPtrops = WOLTKIDPEogress .Pendqinc 


Const rendqe = newProps .childqren'; 


// 读 取 context 
PrepPareTIToReadContext (WOLTKIDProdgress， Le 
Const PhewValue = TeadqContexXt (ConteXty， LI 


et newchil1adqren，; 


// .. .省 略 无 关 代 码 


3. 使 用 usescontext: 用 于 function 中 . 


如 ， Const Value = USeContext (MYyContext ) 


。 进入 updateFunctioncomponent 后 , 会 调 


用 prepareToReadContext 


无 论 是 初次 创建 阶段 , 还 是 更 新 阶 
段 ，usecontext 都 直接 调用 


了 readqContext 


6. class 组 件 中 , 使 用 一 个 静态 属性 contextType: 
用 于 -lass 组 件 中 获取 context. 


如 ， MyC1lLass .contextType = MyContext， 


进入 updateclasscomponent 后 ， 会 调 
用 prepareToReadContext 

。 无论 
constructClasslnstance,mountClasslInstance， 
updateClasslnstance 内 部 都 调 


用 -context = readContext ( (COnteXxtTyYyPe: any: 


所 以 这 3 种 方式 只 是 *eact 根 据 不 同 使 用 场景 封装 
的 api, 内 部 都 会 调用 prepareToReadContext 和 
readContext(contextType). 


// ... 省略 无 关 代 码 
export function PrepareIToReadContext ( 
WOLTKInProdress: Eibperyv 


zendqerLanes: Lanesy， 


RONG 
// 1. 设置 全 局 变量 ， 为 readqContext 做 准备 
CUTLTent LIYyRendqeringEiper = WOTrKIDnPProdgtress， 
astContextDepPenadency = mul1; 
astContextWithAlLl1LIBiILtsobserved = nul1; 


Const Qqependencies = WOTKIDnProdgress .qdqependk 
If (qdqepenaqencies !== nulL1L) 1{ 
Const firstContext = Qqependqencies .firSstCc 
EGGCOmEEXLE RE 三 是 天 


If _ (includesSomeLane (qepenadqencies .anes 


// Context 1List has a pendqing updqate， 


markWorkInProgressReceivedUpadate () ; 


// Reset the work=-in=-Progress 1 并 sk 


Qqependqencies .firstContext = Dul1l; 


} 
// .. .省 略 无 天 代码 
expPort function readqContext<I> ( 
Context : ReactContexXt<I>， 
observeqBits: void | number | boolean， 
)5 
Const ContextItem = { 
Context: ((context: any) : ReactContexXt<m: 
observedqBits: resolvedqobservedqB1its， 


条 已 当天 必 


】} 7 
// 1. 构造 一 个 contextItem， 加 入 到 workIhProgi 
If (LastContextDepenadqency === nul1L) ({ 


astContextDependqency = ContextILtem; 


Curent LIYyRenderingEiper.dqependqencies = ({ 
Janes: NoLanesy， 
GonEE 过 EGRNEETmIE 
zeSspPonaqers: PulLl， 
} 1; 
} else { 
astContextDepenadqency = LastContextDepen 


】 
// 2. 返回 currentValue 


zetutrn 1ISPrimaryRenadqetrer ? context .current 


核心 逻辑 : 


1. prepareToReadContext: 设 
置 currentLyRenqeringFiber = WOLTKIDPPEOoGTressS， 
并 重 置 1astcontextDependency 等 全 局 变量 . 

2. readcontext: 返回 context._currentValue， 
并 构造 一 个 contextItem 添 加 


到 workIinProgress .dependencies 链 表 之 后 . 


注意 : 这 个 r*eadcontext 并 不 是 纯 函 数 , 它 还 有 一 些 


副作用 , 会 更 改 workInProgress .dependencies, 其 

中 contextItem.context 保 存 了 当前 context 的 引 

用 . 这 个 aependencies 属 性 会 在 更 新 时 使 用 , 用 于 判 
定 是 否 依 赖 了 contextProvider 中 的 值 . 


返回 context ._currentvalue 之 后 , 之 后 继续 进 
行 Eiber 树 构造 直到 全 部 完成 即 可 . 

更 新 Context 

来 到 更 新 阶段 , 同样 进 井 入 updateCcontextConsumer 


function upadqateContexXxtProviaderL ( 
ET Ri | 攻 TOINR 
WOLTKInProdtress: ERipbper， 


zendqerLanes: Lanesy， 


Const ProvidqerTIType: ReactProviderTypPe<any> 


Const Context : ReactContext<any> = Providei 


Const newProps = WOTrKInProgtess .PendqingProtk 


GOnms 醒 o 下 REeles WOLTKIDnPEogtress .memoizedQPL 


Const newVvValue = newProps .Value:， 


PushProvidqer (workInProdgress，newvalLue) ; 


Relaxaio 必 三 三 本 OO 辣 国光 
// 更 新 阶段 进入 
const oldvalue = olLldqProps .value:， 
// 对 比 newvalue 和 oldvalue 
Const changedqBits = calculatechangedqBitas 


If (changeaqBits === 0) 1{ 
// value 没 有 变动 ， 进 入 Bailout 还 辑 
3 
olLdqProps .children === mnewPtrops .childi 


!IhasLedg9dacyContextCcChandged () 
Ja 
zetutrn bailoutoOonAlLreadyEinishedqWork ( 
GE 
woOrKInProdgressy 
CenadqerLanesy 
) ;7 
} 
} else { 
//_ value 变动， 查找 对 应 的 consumers， 并 使 其 外 


PEzopagatecContextChange (worKInPFogressy 


} 
// ... 省 略 无 关 代 码 


核心 逻辑 : 


| value 没 有 改变 ， 直接 进入 Bailout( 可 以 回顾 
fiber 树 构造 (对 比 更 新 ) 中 对 bailout 的 解释 ). 


2. value 改 变 , 调用 propagatecontextCchange 


propagateContextChange: 


export function PropadgateContextChange ( 
WOLTKInProdtress: Eipbperyv 
Context : ReactContext<mixedq>， 
chandgedqBits: Pumber， 
CendqerLanes: Lanesy， 
)E Ze 
Jet fipber = WOTKIDnProgress.chilad; 
(EUOE 基 下 IE 三 本 们 届 品 | 
/Se the eturn Ecointer of the chihild 七 
fipbper.return = WOTrKIDnProdgress，; 
】 
while (fipbper !== mnul1) { 
et PnPnexXxtEibper， 
Const List = fiper.aqebpendqencies， 
ES 三 三 芝 TiDam) 居 时 | 
nextEipbper = fibper.chil1ad'; 
Tet aqependqency = 1L1ist.ficstContext; 
while (qdqependqency !== mnul1lL) 1{ 


大 
下 


检查 qdqependency 中 依赖 的 context 
人 
Qepenadency . Context === COntLexXt && 
(daependqency .observedqBitLS & chandedfi 
{ 
// 符合 条 件 ， 安 排 调度 
If _ (fiber.tag === C1LassComponent) :| 
// _ class 组件 需要 创建 一 个 update 对 象 ， 
Const update = CreateUpadate ( 
NoTimestampy 
PickArbitzraryLane (zendqerLanes ) ， 
) ;7 
update.tag = EorceUpdate; // 注意 
endqueueUpdate (fiper，update) ; 
】 
fiper. Lanes = mergeLanes (fijber.1ant 
const altetrnate = fipbper.altetrcnate， 
if (alternate 1!== mul1lL) { 
alternate .anes = mergeLanes (at 
} 
罗 硬 加 本 = 
ScheduleWorkoOnParentPath (fiper.tcetl 


// 标记 优先 级 


ist.1Lanes = mergeLanes (1st .Lanes， 


// 退出 到 找 


Dreak， 


} 


Qqependadency = qependqency .next，; 


// .. .省 略 无 关 代 码 
// .. .省 略 无 关 代 码 


fiper = mextEliber， 


PEopPacateContexXxt change 源 码 比较 长 ， 核心 逻辑 如 


下 : 


1. 向 下 遍历 : 从 contextProvider 类 型 的 节点 开 
始 , 向 下 查找 所 有 fiber.dependencies 依 赖 
该 context 的 万 点 (假设 叫做 consumer). 

2. 向 上 遍历 : 从 consumer 节 点 开始 , 向 上 遍历 , 修 
改 父 路 径 上 所 有 节点 的 fiber.childaLanes 属 
性 , 表明 其 子 节 点 有 改动 , 子 节 点 会 进入 更 新 还 
辑 . 


。 这 一 步 通过 调用 
scheduleWorkOnParentPath(fiber.return， 


[< 
以 


renderLanes) 买 现 . 


expDort function ScheduleWorkOnParentE 
Pacrent: Fiber | null， 
zendqerLanes: Lanesy 
JE 
/aate the ecehila lanes Of hh] th 
let node = Parent，; 
while (node !== mul1l1) 1{ 
Const altetrnate = nodqe.altetrnate，; 
1If (!1sSubsetofLanes (nodqe .chi1l1dLa 


nodqe .childLanes = mezrdeLanes (nc 
If (alternate 1!== mul1) { 
alLternate.childqLanes = ImerdeL 


alLternate .childqLanesy， 
CendqerLanesy 
) ;7 
】 
} else if (人 
al ternate !== null && 
11sSSubsetofLanes (altetrnate.chil 
) 
alLternate .childLanes = metrdeLan 
} else { 
// Neither alternate was Updqate 
]/] anecestor Path alreaday has s1 


DreaKk'， 


} 


nodae = nodqe.retutrn; 


scheduleWorkonParentPath 与 
markUpdateLaneFromFiberToRoot 的 作 
用 相似 , 具体 可 以 回顾 fiber 树 构 造 (对 比 更 
新 ) 


通过 以 上 2 个 步骤 , 保证 了 所 有 消费 该 context 的 子 
节点 都 会 被 重新 构造 , 进而 保证 了 状态 的 一 致 性 , 实 
现 了 context 更 新 . 


总 结 


VE 一 


context 的 实现 思路 还 是 比较 清晰 , 总 体 分 为 2 步 . 


1. 在 消费 状态 时 ,contextconsumer 节 点 调 
用 readqcontext (Mycontext) 获取 最 新 状态 . 

2. 在 更 新 状态 时 , 由 contextProvider 节 点 负责 查 
找 所 有 contextconsumez 节 点 , 并 设置 消费 节点 
的 父 路 径 上 所 有 节点 的 fiber.childLanes, 保 
证 消费 节点 可 以 得 到 更 新 . 


React 合成 事件 


原文 : https:W/github.com/7kms/react- 
川 Ustration-series/blob/main/docs/mainm/ 
Synthetic-event.md 


title 
合成 事件 


带 
时 


从 v17 RNOs 0 开始 ， React 不 会 再 将 事件 处 理 添加 
到 Qocument E， 而 是 将 事件 处 理 添 加 到 这 染 React 
树 的 根 DOM 容器 中 . 


引入 官方 提供 的 图 片 : 


REACT 1C REACT 17 


图 中 清晰 的 展示 了 v17.0.0 的 改动 , 无 论 是 
在 aocument 还 是 根 DOM 容器 上 监听 事件 ， 都 可 以 归 
为 事件 委托 (代理 ) (mdn)， 


注意 : react 的 事件 体系 , 不 是 全 部 都 通过 事件 委托 来 
实现 的 . 有 一 些 特殊 情况 , 是 直接 绑 定 到 对 应 DOM 
元 素 上 的 (如 :scrol1，load), 它们 都 通过 
listenToNonDelegatedEvent 范 数 进行 绑 定 . 


上 述 特殊 事件 最 大 的 不 同 是 监听 的 DOM 元 素 不 同 ， 
除 此 之 外 , 其 他 地 方 的 实现 与 正常 事件 大 体 一 致 . 


本 节 讨 论 的 是 可 以 被 根 poM 容器 代理 的 正常 事件 . 


事件 绑 定 


在 前 文 React 应 用 的 启动 过 程 中 介绍 了 React 在 启动 
时 会 创建 全 局 对 象 , 其 中 在 创建 fiberRoot 对 象 时 , 调 


用 createRootlmpl: 


function createRootImP1 ( 
Container: Container， 
EagqeoRoeEEaGF 
options: void | Rootoptions， 
由 | 
// ... 省略 无 关 代 码 
If _ (enableEadgderRootL1isSteners) ({ 
Const rootContainerE1lement = 三 
Container .nodqeType === COMMENT_NODE ? 
istenIToAlL1LSuppPortedEvents (ootContaineLrI 
} 
// ... 省略 无 关 代 码 


listenToAllSupportedEvents 函 数 , 实际 上 完成 了 事 
件 代 理 : 


// ... 省 略 无 关 代码 


eXpPort function stenToA11SupportedEventsS ( 工 ( 


If (enableEadgderRootListeners ) 


{ 


// 1. 节 流 优化 ， 保 证 全 局 注册 只 被 调用 一 次 


If ((zootContainetE1lLement : 
0 的 


} 


any) [IstenInc 


(ootContainetElement : any) [ListeningMarl 
// 2. 遍历 al1NativeEvents 监听 冒 泡 和 捕获 阶段 


alL1LNativeEvents .forEach (qdqomEventName => | 


If (!InonDelegatedqEvents .has (QomEVentNal 


1 1stenIToNat1iveEvent ( 
QqomEVvZentNamey 
false，// 冒 泡 阶 段 监听 


( (ootContaineE1lLement : 


1 
) ;7 
LSstenToNat1iVeEVvent ( 


QqomEvZentNamey 
ttrue，// 捕获 阶段 监听 


( (ootContaineE1lLement : 


四 风 遇 | 有 


本 向 yj 


GAO 吉 攻 : 


也 em 


忆 Lement 


核心 逻辑 : 


1. 节 流 优化 , 保证 全 局 注册 只 被 调用 一 次 . 
2. 遍历 all1NativeEvents, 调 
用 1istenToNativeEvent 监 听 冒 泡 和 捕获 阶段 


的 事件 . 


电 alLllNativeEvents 包 括 了 大 量 的 原生 事件 
名 称 , 它 是 在 poMPLuginEventSystem. js 


中 被 初始 化 


listenToNativeEvent: 


// ... 省略 无 天 代码 

exXxpDort function 1ListenIoNativZeEvent ( 
QqomEventName : DOMEVentName， 
1ISsCapturePhaseListener: booleany， 
xzootContainerElement : EVentTardet， 
targetElement : Element | nul1l， 
eVentSystemE1lagds?: E7entSystemE1lags = 0， 


SSXoaral 
1et target = ootContainezrElLement ， 
Const Li1stenerSet = getEVentListenerSet (七 ai 


Const Li1istenerSetKey = detListenerSetKey ( 
QqomEventNamey 


1ISsCapturePhaseListenerv 
) ;7 
// 利用 set 数 据 结构 ， 保 证 相同 的 事件 类 型 只 会 被 注册 一 
If (!1L1stenerSet .has (LIstenerSetKey)) ({ 
If (IsCapturePhaseListener) ({ 
eventSystemE1ads 医 工 S_CAPTIURE_PHASE， 
】 
// 注册 事件 监听 
adqdqTrappedqEventLisStener ( 
ESTEOeE 
QqomEventNamey 
eVentSystemE1adsy， 
1ISsCapturePhaseListenerv 
) ;7 
LSstenerSet .add (11stenerSetKey) ; 


addTrappedEventListener': 


// ... 省 略 无 关 代 码 

function addqTrappedqEventLiSsStener ( 
廿 ardgetContainer: EVentTITatrgetv， 
QqomEventName : DOMEVentNamey， 
eVentSystemE1Lagds: EV7entSystemE1lagsv 


1ISsCapturePhaseListener: booleany， 


IsDeferredqListenerEorLedgacyEBSupport2?: boo] 
) 
// 1. 构造 1istenez 
Jet 1Sstener = CreateEventListenerrWzapPpPer 人 3 
七 arGgetContainerv 
QqomEventNamey 
eVentSystemE1adsy， 
) 7 
et unsubscribeListener， 
// 2. 注册 事件 监听 
If (IsCapturePhaseListener) ({ 
unsubscribeListener = aaddqEVentCaptureList 
七 arGetContainerv 
QqomEvZentNamey 
ILSstenerv 
) 
} else { 
unsubscribeListener = aaddqEVentBubb1leLists 
七 arGgetContainerv 
QqomEventNamey 
1steneryv 


) 


// 注册 原生 事件 冒 泡 
expDort function addqEventBupbbleListener ( 


七 arget: EventTIargetyv 


eVentTIType: Strindy， 
ETIGTE ER GETGOm 


JIAEOEGOID 


本 ardget .addqEVentListener (eventType 1L1stenea 


zeturn Istener， 


// 注册 原生 事件 捕获 

expDort function addqEentCaptureListener ( 
tarcget: 下 VentTargety 
eVentTIType: Strindyv 
SETIGT EU CEIGm 生 


JUAKeESLGNSTE 


本 ardget .addqEVentListenezr (eventType， 1L1stenea 


zeturn 1stener， 


从 listenToAllsupporteqdEvents 开 始 , 调用 链 路 比 
较 长 , 最 后 调用 aaqgventBubbleListener 
和 aaqqgventcaptureListenez 监 听 了 原生 事件 . 


原生 listener 


在 注册 原生 事件 的 过 程 中 , 需要 重点 关注 一 下 监听 肯 
数 , 即 1istener 了 因数 . 它 实现 了 把 原生 事件 派发 
到 *eact 体 系 之 内 , 非常 天 键 . 


比如 点 击 DOM 触发 原生 事件 , 原生 事件 最 后 
会 被 派发 到 react 内 部 的 cnclick 上 蜗 
数 . 1istener 了 图 数 就 是 这 个 由 外 至 内 的 天 键 环 


-ia 
了 . 
Listener 是 通 


过 createEventListenerNrapperWithPriority 吨 数 
产生 : 


eXpPort function CreateEVentListenerWzrapPerWit 
七 ardgetContainer: EVentTITarcdgetyv 
QomEventName : DOMEVentNamey， 
eventSystemE1ladgds: E7entSystemE1lagsy， 
ER 和 STAGESLCGNSD 
// 1 工 .根据 优先 级 设置 11istenezrWrapPer 
Const eVentPLriority = getEVentPLziIOoOCILYEOrP 
1et 1SstenerWzrappPer， 
Switch (eventPriority) 1{ 
Case DiscreteEvVent : 
istenerWrapper = qispatchDiscteteEvent 
Dreak'， 
Case UserBlockingEvent : 
1istenerWrapper = qispatchUserBlLlockingri 
Dreak'， 
Case ContinuousEvent : 
Qqefault : 


1istenerWrapper = qispatchEvent， 
Dreak'， 


} 
// 2. 返回 1istenerWrapper 


zetutrn istenecWrappPezt .binad ( 
何 四 可 司 | 归 
QqomEventNamey 
eVentSystemE1adsy， 


七 arGgetContainerv 


可 以 看 到 , 不 同 的 somEventName 调 


用 aetEventPriorityEorPluginSystem 后 返回 不 同 


的 优先 级 , 最 终 会 有 3 种 情 . 


1. DiscreteEvent: 优先 级 最 高 ， 包 
插 click，keyDown，input 等 事件 , 源码 


。 对 应 的 1istenezr 是 dispatchDiscreteEvent 
3. UserBlockingEvent: 优先 级 适中 ， 包 
插 araa， scrol1 等 事件 , 源码 


后 对 应 的 1istenezr 是 
dispatchUserBlockingUpdate 


5. ContinuousEvent: 优先 级 最 低 , 包 
插 animation， 1oadq 等 事件 , 源码 


。 对 应 的 1istener 是 dispatchEvent 


这 3 种 1istener 买 际 上 都 是 对 dispatchEvent 的 包 


说 


开 


// .. .省 略 无 关 代 码 
exXpPort function qispatchEvent ( 
QqomEventName : DOMEVentNamey， 
eVvVentSystemE1Lagds: E7entSystemE1lagsv 
廿 ardgetContainer: EVentTITatcgetv 
nativeEvVent : AnyNatiVeEVentyv 
JEREESNAonel 
If (! enabledq) { 
et 荆 uzDmny， 
} 
Const blockedon = attemptIToDispatchEvent ( 
QqomEventNamey 
eVentSystemE1adsy， 
七 arGgetContainerv 


nativeEventy， 


事件 触发 
当 原生 事件 触发 之 后 , 首先 会 进入 到 aispatchzvent 


这 个 回 调 函 数 . 而 ai SPat chEvent 呈 数 是 react 事 件 
体系 中 最 关键 的 函数 , 其 调用 链 路 较 长 , 核心 步骤 如 
图 所 示 : 


dispatchEvent 调用 链 路 
dispatchEvent 
外 界 的 原生 事件 与 react 内 部 的 hber 节 
全 全 加 志 一 @ 点 相对 应 


由 


dispatchEventForPluginEventSystem 


了 


dispatchEventsForPlugins 


遍历 fber 树 , 提取 事件 的 监听 函数 , 存 
extractEvents 入 listeners 数 组 中 


| RE 
Plugins 1 1 
| listeners = ! 


extractEvents， accumulateSinglePhaseListeners(.…) 


SimpleEventPlugin | 
| | dispatchQueue | 
.push({(SyntheticEvent ,listeners)) | 
EnterLeaveEventPlugin ， 人 了 人 
| | “ChangeEventFlugin | 创建 合成 事件 , 加 入 到 派发 队列 
| SelectEventPlugin 1 
BeforelnputEventPlugin 
processDispatchQueue 志 9@ 人 遍历 队列 , 派发 事件 


重点 天 注 其 中 3 个 核心 环节 : 


1. attemptToDispatchEvent 


2. SimpleEventPlugin.extractEvents 


3. processDispatchoueue 


关联 fiber 
attemptToDispatchEvent 把 原生 事件 和 fiber 树 关联 
起 来 . 


exXxpDort function attemptIToDispatchEvent ( 
QomEvZentName : DOMEVentNarmey， 
eVentSystemE1Lagds: EV7entSystemE1lagsy， 
七 ardgetContainer: EVentTITatcgety， 
nativVveEvVent : AnyNativVeEVent， 


Ji ContaineL SuspenseInstance { 


// .. .省 略 无 关 代 码 


// 1. 定位 原生 DOM 节 点 


Const nativeEventTardet = 9etEventTITardet (nz 


// 2. 获取 与 DOM 节 点 对 应 的 fiber 贡 点 


1 et 七 argetInst = getClosestInstanceFLrecomNodk 


// 3. 通过 插件 系统 ， 派 发 事件 
dqispatchEventEorPlIuginEVentSystem ( 
QqomEventNamey 
eVentSystemE1adsy， 
nat1ivZeEVent， 
acetmnistk 


七 arGetContainery 


)7 


seDinsiaia io: 


核心 有 允 辑 : 


1. 定位 原生 DOM 节点 : 调用 getEgventTarget 
2. 获取 与 DOM 蔬 氮 对 应 的 fiber 书 点 : 调 

用 aetclosestInstanceEromNode 
3. 通过 插件 系统 , 派发 事件 : 调 


用 qispatchEventEorPlIuginEventSystem 


收集 fiber 上 的 listener 


QispPat chEvent 卫 数 的 调用 链 路 中 ， 通过 不 同 的 插件 ， 
处 理 不 同 的 事件 . 其 中 最 常见 的 事件 都 会 


由 simplegventPlugin.extractEvents 进 行 处 理 : 


function extractEvVents ( 
qispatcheueue: Dispatcheueuey 
QomEventName : DOMEVentNamey， 
ES EROSE 
nativeEvent : AnyNativVeEVent， 
aesaeEeme aseet 人 册 由 可 也 VentTIacdet|， 


eVventSystemE1ads: EventSystemE1l1agsyv 


二 ardgetContainer: EVentTITacdgetyv 


NAeialell| 
Const reactName = 七 OPLeVveTEVentSITOoReactName 
If (zeactName === Undefinedq) { 

Eetuzcnmny， 


1et SyntheticEventCtor = SyntheticEvent， 


Tet LrceactEventType: string = qomEventName， 
Const inCapturePhase = (eventSystemEF1ladgs & 
Const accumulateTardetoOonly = !1inCapturePhas 
// 1. 收集 所 有 监听 该 事件 的 轴 数 . 
Const 1L1isteners = accumulateSinddlLlePhaseList 
Genisie 
CeactNamey 


natiZeEVent .七 YPDeyv 
InCapturePhaseyv 
accumulateTITardgetoOon1yv 

) 7 
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// 2. 构造 合成 事件 ， 添加 到 派发 队列 


const event = new SyntheticEVentCtor ( 
CeactNamey 
CeactPvVentTITypPey， 
1 


nat1ivVeEvVenty， 


nati7eEVentTITardet， 


Qispatchoueue .Push ({ eventy，，1L1isteners 】}) ， 


核心 逻辑 : 
1. 收集 所 有 1istener 回 调 


。 这 里 的 
是 fiber.memoizeqProps.onClick/onCclickCapti 


等 绑 定 在 fiber 节 点 上 的 回调 浮 数 


。 具体 逻辑 在 


accumulateSinglePhaseListeners: 


exXpPort function accumulateSinglePhase 
targetEiber: Fiber | nul1， 
zeactName: String | null， 
natiVeEVentTITypPe: Stringy， 
InCapturePhase: booleany， 
accumulateTargetonlLy: boolean/ 

) : Array<DispatchListener> { 
Const captureName = eactName  !== Dn 
Const LeactEVentName = 1InCapturePha 


Const 11steners: Array<DispatchList 


Jet instance = 七 argetEiber; 


Let LastHostComponent = nulL1l，; 


// 从 targetEiber 开 始 ， 向 上 遍历 ， 直到 : 


while (instance !== mulL1) 1{ 


} 


Const { stateNodqe，tadqg } = instan 
// 当 节 点 类 型 是 HostComponent 时 (如 : :上 
If (tag === HostComponent && stat 
astHostComponent = StateNodae， 
If (zeactEventName 1!== mul1l1) { 
// 获取 标准 的 监听 肯 数 (如 onc1lick 
Const Li1stener = getListenez ( 
全国 S 攻 SS 由 研 和 DID | 
LSsteners .Pusn ( 


CreateDispatchListener (in 


) ; 


} 

// 如 果 只 收集 目标 节点 ， 则 不 用 向 上 遍历 ， 

If (accumulLateTardgeton1lLy) ({ 
Dreak， 

】 


Instance = instance.retutn， 


这 世 巧 站 下 站 当下 TSEEmDme 站 = 


4 . 构造 合 成 事件 (syntheticEvent)， 添加 到 派发 队 


列 (ai SPat choueue) 


构造 合成 事件 


SyntheticEvent, 是 react 内 部 创建 的 一 个 对 象 , 是 原 
生 事件 的 跨 浏览 器 包 闪 器 , 拥有 和 浏览 器 原生 事件 相 
同 的 接口 (stopPropagation,preventDefault)， 抹 平 


不 同 浏览 器 api 的 差异 , 兼容 性 好 . 
具体 的 构造 过 程 并 不 复杂 , 可 以 直接 查看 源码 . 


此 处 我 们 需要 知道 ， 在 Plugin . extractEgventsj 过 程 
中 , 遍历 fiber 树 找到 1istener 之 后 , 就 会 创 
建 syntheticEvent， 加 入 到 ai spatchoueue 中 ， 等 待 


派发 . 
执行 派发 


eXtLzactEVent s 完 成 之 后 ， 逻辑 来 到 
processDispatchQueue, 终于 要 真正 执行 派发 了 . 


export function ProcessDispatchoueue ( 


qispatcheueue: Dispatcheueuey， 


eventSystemE1adgds: EventSystemEFE1lagsy， 
JESVostel 
Const inCapturePhase = (eventSystemF1adgs & 
for (let 1 = 0;) 奔 < dispatchoueue. Length; : 
Const { event，，1Listeners } = Qispatchouei 


PtrocessDispatchoueueItemsInOrader (event， : 


} 
// .. .省 略 无 关 代 码 


function ProcessDispatchQoueueItemsInOrder ( 
evVent : ReactSyntheticEventy， 
qispatchListeners: Array<DispatchListeneLz 上 >， 
inCapturePhase: booleanyv 
JE Xeioe 
1et previousInstance，; 
If (inCapturePhase) ({ 
// 1. capture 事 件 : 倒序 遍历 11steners 
for (let 工 = QispatchListeners .length 一 : 
Const { instance currentTITardet，1L1stei 
If (instance 1!== PreViousInstancel && e+ 
etUuzDmy; 
} 
eXecuteDispatch (event，1L1stener， CuUrLrei 
PreviousInstance = instance'; 
} 
} else { 
// 2. bupble 事 件 : 顺序 遍历 11stenezrs 


for (let 1I1 = 0) 工 < qispatchListeners.1ei 


const { instance CUTTentTardet， 


If _ (instance 1!== PreViousInstancel && e+ 


中 人 ES 


】 
exXecuteDispatch (event，1L1stenev 


PtreviousInstance = instance， 


在 processDispatchQueueltemslnOrder 遍 

历 aispatchListeners 数 组 , 执行 executeDispatch 
派发 事件 , 在 fiber 节 点 上 绑 定 的 1istenez 上 蚊 数 被 执 
行 . 


在 processDispatchoueueItemsInorder 加 | 数 中 ， 根 
据 捕 获 (capture) 或 冒 泡 (bubble) 的 不 同 , 采取 了 不 
同 的 遍历 方式 : 


1. capture 事 件 : 从 上 至 下 调用 fiber 树 中 绑 定 的 回 
调 函 数 , 所 以 倒序 遍历 aispatchListeners， 

2. bubble 事 件 : 从 下 至 上 调用 fiper 树 中 绑 定 的 回 
调 函 数 ， 所 以 顺序 遍历 aispatchListeners. 


总 结 

从 架构 上 来 讲 , SyntheticEvent 打 通 了 从 外 

部 原生 事件 到 内 部 fibezr 树 的 交互 渠道 , 使 得 react 能 
够 感知 到 浏览 器 提供 的 原生 事件 , 进而 做 出 不 同 的 响 
应 ， 修改 fiber 树 ， 变更 视图 等 . 


从 实现 上 讲 , 主要 分 为 3 步 : 


一 人 


.监听 原生 事件 : 对 齐 poM 元 素 和 fipber 元 素 

2. 收集 Listeners: 遍历 fibez 树 , 收集 所 有 监听 本 
事件 的 1istener 函 数 . 

3. 派发 合成 事件 : 构造 合成 事件 , 遍历 1isteners 

进行 派发 . 


局 频 算 法 


React 算法 之 位 运算 


原文 : https:W/github.com/7kms/react- 
诈 Ustration-series/blob/main/docs/algorithnmy/ 
bitfield.md 


title 


网 络 上 介绍 位 运算 的 文章 非常 多 (如 MDN 上 的 介绍 
就 很 仔细 ). 


本 文 的 目的 : 
1. 温 故 知 新 , 对 位 运算 的 基本 使 用 做 一 下 简单 的 


沁 Z 士 
总 结 四 


2. 归纳 在 javascript 中 使 用 位 运算 的 注意 事项 . 
3. 列举 在 react 源 码 中, 对 于 位 运算 的 高 频 使 用 场 


位 运算 直接 处 理 每 一 个 比特 位 (bib, 是 非常 底层 的 运 


算 , 优势 是 速度 快 , 劣势 就 是 不 直观 且 只 支持 整数 运 


按 位 非 (~) 


左 移 (<<) 


六 委 


描述 
对 于 每 一 个 比特 
位 ,两 个 操作 数 都 
为 { 时 , 结果 为 
1, 否则 为 0 
对 于 每 一 个 比特 
位 ,两 个 操作 数 都 
为 0 时 , 结果 为 
0, 否则 为 1 
对 于 每 一 个 比特 
位 ,两 个 操作 效 相 
同时 , 结果 为 0， 
否则 为 1 
反 转 操作 数 的 比 
特 位 , 即 0 变 成 
1, 1 变 成 0 
将 a 的 二 进 制 形 
式 向 左 移 b (< 


32) 比特 位 , 右边 


用 0 填 友 
有 符号 右 移 (>>) a >> b 将 a 的 二 进 制 形 
陈 向 右 移 b (< 


32) 比特 位 , 雪 弃 
被 移 除 的 位 , 左 
侧 以 最 高 位 来 填 


充 
无 符号 右 移 (>>>) a >>> b 将 a 的 二 进 制 形 
陈 向 右 移 b (< 


32) 比特 位 , 雪 弃 
被 移 除 的 位 , 并 
用 0 在 左 侧 填充 


在 zs5 规 范 中 , 对 二 进 制 位 运算 的 说 明 如 下 : 
The Proadquction A : AQB，where Q is one of the 


Let LIref be the result of evaluatind 和 A. 
Let LVval be GetValue (LIref) .。 


Let rref be the result of evaluatind B. 


Let FrVal be GetValLue (ref) . 


ES lnum 且 世 E 本 下 G 下 站 蕊 二 22 (可 5] 忆 原 
让 < 让 mi 本 所 和 全 下 @ 王 站 让 3 2 (元 呈 可 ) 原 


STRCSNAECTETE 晤 CO 


Return the result of appLlyindg the bitwise ope 


意思 是 会 将 位 运算 中 的 左右 操作 数 都 转换 


为 有 符号 32 位 整 型 , 上 且 返 回 结果 也 是 有 符号 32 位 整 型 


。 所 以 当 操作 数 是 浮 点 型 时 首先 会 被 转换 成 整 型 ， 
再 进行 位 运算 

。 当 操作 数 过 大 , 超过 了 int32 范 围 , 超过 的 部 分 
会 被 截取 

通过 以 上 知识 的 回顾 , 要 点 如 下 : 

1. 位 运算 只 能 在 整 型 变量 之 辣 进 行 运 算 

2. js 中 的 Number 类 型 在 拱 层 都 是 以 浮 点 数 (参考 
IEEE754 标准 ) 进 行 存储 . 

3.js 中 所 有 的 按 位 操作 符 的 操作 数 都 会 被 转 成 补 


码 (two's complement ) 形式 的 有 符号 32 位 整数 . 


所 以 在 js 中 使 用 位 运算 时 , 有 2 种 情况 会 造成 结 


异常 : 
1. 操作 数 为 浮 点 型 (虽然 底层 都 是 浮 点 型 , 此 处 理 
解 为 显示 性 的 浮 点 型 ) 


。 转换 流程 : 浮 点 数 -> 整数 (丢弃 小 数位 ) -> 
位 运算 


3. 操作 数 的 大 小 超过 Int32 范 围 
(-2^31 ~ 2^31-1). 超过 范围 的 二 进 制 位 会 被 截 
盯 , 取 低 位 32bit. 


eeosec OOaO000U0U0UUb00001 
六 Eee 101000000000000001 


另外 由 于 js 语言 的 隐 陈 转换 , 对 非 wumber 类 型 使 用 
位 运算 操作 符 时 会 发 生 隐 了 式 转 换 , 相当 于 先 使 
用 Number (xxx) 将 其 转换 为 number 类 型 ， 再 进行 位 运 


算 : 


str >>> 0) // ===> Number('stz7") >>>| 0 =:= 


基本 使 用 


为 了 方便 比较 , 以 下 演示 代码 中 的 注释 , 都 写成 了 8 
位 二 进 制 数 ( 上 文 已 经 说 明 , 事实 上 在 js 中 , 位 运算 
最 终 的 结果 都 是 Int32). 


枚 举 属性 : 


通过 位 移 的 方式 , 定义 一 些 枚 举 常量 


GOTs 入 王国 << 人 0 多 十 Oo000UUUUI 
Caomste 忆 王国 | 和 < 汪 和 A0S00UOOUOO 
Gonms 攻 划一 半天 长 2 人 000000RUU 


位 掩 码 : 
通过 位 移 定 义 的 一 组 枚 举 常量 , 可 以 利用 位 掩 码 的 特 
性 , 快速 操作 这 些 枚 举 产 量 (增加 , 删除 , 比较 )， 


1. 属性 增加 | 


1.ABC =RA|B |c< 


2. 属性 删除 ~ 


1.AB = ABC & ~cC 


3. 属性 比较 


1. AB 当中 包含 B: AB & B === B 
2. AB 当中 不 包含 C: AB g& c === 
3.A 和 B 相 等 : A === B 


Conms 攻 入 王 三 本 1 关 <50 有 和 和 00UUO0U0 


GOhSE 攻 玉 王 三 滞销 和 05000000 下 0 
Goes 是 三 本 2 和 和 Oo0000b 环 0 


// 增加 属性 

ESEEAECE 天 | 有 E 引 | 人 ce 2 和 00uU0g 
// 删除 属性 
OUUUUITEL 


// 属性 比较 
写 滞 BE 当 呈 包含 己 


Console.1logd((AB & B) === B);) // true 
// 2. AB 当 中 不 包含 c 

Console.lodgd((AB & C) === 0)) // true 
// 3. ARA 和 B 相 等 

Console.1lodgd(A === B);) // false 


React 当中 的 使 用 场景 

在 react 核心 包 中 , 位 运算 使 用 的 场景 非常 多 . 此 处 
只 列举 出 了 使 用 频率 较 高 的 示例 . 

优先 级 管理 lanes 


lanes 是 17.x 版 本 中 开始 引入 的 重要 概念 , 代替 
了 16.x 有 版 本 中 的 expirationTime， 作为 fiber 对 象 的 
一 个 属性 (位 于 r*eact-reconciler 包 ), 主要 控制 


fiber 树 在 构造 过 程 中 的 优先 级 (这 里 只 介绍 位 运算 的 
应 用 , 对 于 lanes 的 深入 分 析 在 优先 级 管理 章节 深入 


首先 看 源码 ReactFiberLane.js 中 的 定义 
// 类 型 定义 
expPort opadque type Lanes = numbper， 
expPort opadque type Lane = numbper， 


// 变量 定义 


expPort const NoLanes: Lanes = /rx 

expPort const NoLane: Lane = /rx 

eXpPort const SyncLane: Lane = /rx 

eXport const SyncBatchedqLane: Lane = /r 


exXpDPort const InputDiscreteHyadrationLane: Lant 


const InputDiscreteLanes: Lanes = /rx 

Const InputContinuousHyaqrationLane: Lane = /， 
Const InputContinuousLanes: Lanes = /r* 

] 


/ 忆 


EGG 下 总 由 过 下 二 而 芭 坟 汪汪 儿 


exXpPort const IdleHydqrationLane: Lane = 
const IdqleLanes: Lanes = /r* 
expPort const OffscreenLane: Lane = /r 


源码 中 ranes 和 Lane 都 是 numbesr 类 型 , 并 且 将 所 有 变 
量 都 使 用 二 进 制 位 来 表示 ， 


注意 : 源码 中 变量 只 列 出 了 31 位 , 由 于 js 中 位 运算 
都 会 转换 成 Int32( 上 文 已 经 解释 ), 最 多 为 32 位 , 且 
最 高 位 是 符号 位 . 所 以 除去 符号 位 , 最 多 只 有 31 位 
可 以 参与 运算 . 


方法 定义 : 
function getHighestPriorityLanes (anes : 


// 判断 Lanes 中 是 否 包含 SyncLane 
If ((SyncLane & Lanes) !== NoLanes) ({ 


工 anes 


zeturn_ _ highestLanePriority = SyncLanePTLI 


Cetuzn SyncLane， 


】 
// 判断 1anes 中 是 否 包含 SyncBatchedLane 


If ((SyncBatcheadqLane & Lanes) !== NoLanes ) 
return_ hidhestLanePriority = SyncBatchedi 
zetutrn SyncBatchedLane， 


} 
二 
// ... 省 略 其 他 代码 


Ceturn anes，; 


在 方法 定义 中 , 也 是 通过 位 掩 码 的 特性 来 判断 二 进 制 
形式 变量 之 间 的 关系 . 除了 常规 的 位 掩 码 操作 外 , 特 
别 说 明 其 中 2 个 技巧 性 强 的 函数 : 


攻 detHidhestPzriorityLane: 分 离 出 最 高 优先 级 


function getHighestPriorityLane (Lanes: Lanes ) 


Ceturn anes & -Lanes，; 


通过 lanes sx -lanes 可 以 分 离 出 所 有 比特 位 中 最 右 
边 的 1, 具体 来 讲 : 


。 假 


设 anes (InPutDiscreteLanes) = 0pb000000000000( 


。 那 
[人 

。 所 

以 lanes & -lanes = 0b00000000000000000000000( 

相 比 最 初 的 InputDiscreteLanes, 分 离 出 来 

了 最 右边 的 1 

通过 lanes 的 定义 , 数字 越 小 的 优先 级 越 高 , 所 

以 此 方法 可 以 获取 最 高 优先 级 的 lane 


1 getLowestPriIoriItyYyLane: 分 离 出 最 低 优先 级 


function getLowestPriorityLane (Lanes: Lanes) 
// This finqdqs the most significant non 一 Ze 
const inadqex = 31 - cl1lz32 (Lanes) ; 


return inaqex < 0 ? NoLanes : 1 << inaqex，; 


clz32 (lanes) 退 回 一 个 数字 在 转换 成 32 无 符号 整 
形 数 字 的 二 进 制 形式 后 , 前 导 0 的 个 数 (MDN 上 的 解 


双 
释 ) 


。 假 


设 anes (InPutDisctreteLanes) = 0pb000000000000( 
由 那么 ClLz32 (Lanes) = 27， 由 于 
InputDiscreteLanes 在 源码 中 被 书写 成 了 31 
位 , 虽然 在 字面 上 前 导 0 是 26 个 , 但 是 转 成 标 
准 32 位 后 是 27 个 
e。 indqex = 31 - Clz32 (Lanes) = 4 
。 最 
后 1 << index = 0b000000000000000000000000001 
相 比 最 初 的 InputDiscreteLanes, 分 离 出 来 
了 最 左边 的 1 
通过 lanes 的 定义 , 数字 越 小 的 优先 级 越 高 , 所 
以 此 方法 可 以 获取 最 低 优 和 级 的 lane 


执行 上 下 文 ExecutionContext 


ExecutionCcontext 定 义 与 react-reconciler 包 中 ， 

代表 reconciler 在 运行 时 的 上 下 文 状态 

ee 执行 上 下 文章 节 中 深入 解读 , 此 处 介 
绍 位 运算 的 应 用 ). 


exXPort const NoContext = /r* *7 OIL 
Const BatchedContext = /r* 夫 ] 全 


GOmSEEYEECODEEZRUL 要 外 
OO 


const LegacyUnbatcheadqContext = /六 


Const RenderContext = /r* 

Const CommitContext = /r* 

eXPort Const RetryAfLerELrEOF 一 /rx 
刀 


*/ 
2 
xx/ 
*/ 
xx 
< 


0k 
0k 
0k 
0 
0 
0k 


而 放 SEOSR 人 XecCut 
NOC 


et executionContext : 了 XecutionContexXt 


注意 : 和 lanes 的 定义 不 同 ,Executioncontext 类 型 
的 变量 , 在 定义 的 时 候 采 取 的 是 8 位 二 进 制 表示 ( 因 


为 变量 的 数量 少 , 8 位 就 够 了 , 没有 必要 写成 31 位 ) 


使 用 (由 于 使 用 的 地 方 较 多 , 所 以 举 一 个 代表 性 强 的 
例子 ， ScheduleUpdateoOnEiber 级 数 
是 *eact-reconciler 包 对 react 包 暴露 出 来 的 api， 


每 一 次 更 新 都 会 调用 , 所 以 比较 特殊 ): 


// schedquleUpdateonFEibezr 国 数 中 包含 了 好 多 关于 exec 


expDort function schedquleUpdateoOnEiper ( 
fiper: ERiper， 


ane: Laney 


eVZentTime: numberyv 
1 
If (xzoot === WOLTKIDnPProdgressRoot) { 
// 判断 : executionCcontext 不 包含 RenderCcon 
人 人 
deferRenderPhaseUpdateToNextBatch || 
(executionContext & RenderContext) ==== 
J 人 | 
2 


】 
If (Lane === SyncLane) { 
LE 人 
// 判断 : executionContext 包含 LegacyUnr 
(executionContext & Ledg9acyUnbatchedCont 
// 判断 : executionCcontext 不 包含 RendqerC 
(executionCcontext & (RendqercContext C' 
刀 到 
仿 


本 蔬 介 绍 了 位 运算 的 基本 使 用 , 并 列举 了 位 运算 

在 react 源 码 中 的 高 频 应 用 . 在 特定 的 情况 下 , 使 用 
位 运算 不 仅 是 提高 运算 速度 , 且 位 掩 码 能 简洁 和 清晰 
的 表示 出 二 进 制 变量 之 间 的 关系 . 二 进 制 变量 虽然 有 
优势 , 但 是 缺点 也 很 明显 , 不 够 直观 , 扩展 性 不 好 (在 
js 当中 的 二 进 制 变量 , 除去 符号 位 , 最 多 只 能 使 用 31 
位 , 当 变 量 的 数量 超过 31 位 就 需要 组 合 , 此 时 就 会 
变 得 复杂 ). 在 阅读 源码 时 , 我 们 需要 了 解 二 级 制 变量 
和 位 掩 码 的 使 用 . 但 在 实际 开发 中 , 需要 视 情 况 而 定 ， 
不 能 盲目 使 用 . 


悍 


考 资料 
ECMAScript@ Language Specification(Standard 
ECMA-262 5.1 Edition) Binary Bitwise Operators 


浮 点 数 的 二 进 制 表示 


IEEE 754 


React 算法 之 堆 排 序 


原文 : https:W/github.com/7kms/react- 
诈 Ustration-series/blob/main/docs/algorithnmy/ 
heapsort.md 


title 
堆 排序 


概念 


二 叉 堆 是 一 种 特殊 的 堆 , 二 叉 堆 是 完全 二 叉 树 或 者 近 
似 完全 二 叉 树 . 


堆 排 序 是 利用 二 义 堆 的 特性 , 对 根 忆 点 (最 大 或 最 小 ) 
进行 循环 提取 , 从 而 达到 排序 目的 ( 堆 排 序 本 质 上 是 
一 种 选择 排序 ), 时 间 复 杂 度 为 o(nlog n) 


特性 


1. 父 忆 点 的 值 >= 子 万 点 的 值 (最 大 堆 ), 父 忆 点 的 值 
<= 子 忆 点 的 值 (最 小 堆 ). 每 个 节点 的 左 子 树 和 右 


子 树 都 是 一 个 二 又 堆 . 

2. 假设 一 个 数组 [ko，k1，k2，...kn] 下 标 从 0 
开始 . 则 xi <= k2i+1l,ki <= k2i+2 或 
者 ki >= k2i+l,ki >= k2i+2 (| = 0,1,2,3 .. 
n/2) 


基本 使 用 


假设 现在 有 一 个 乱 序 数组 , [5,8,0,10,4,6,1], 现在 将 
其 构造 成 一 个 最 小 堆 


1. 构造 二 又 堆 


。 需要 从 最 后 一 个 非 叶 子 世 点 开始 , 向 下 调 
整 堆 结构 


1. 插入 节点 , 重新 向 上 调整 堆 (sift-up) 


。 将 新 元 素 插入 到 数组 末尾 之 后 , 要 重新 府 
整数 组 结构 , 保证 数组 任 然 是 最 小 (或 最 大 ) 
堆 . 


最 小 堪 癸 入 节点 ) 


调 路 公 : 从 揪 入 节点 开 
问 上 比较 , 和 到 要 他 训 


怀 
人 。 ) 一人 Ra 位 于 昌 尼 
、 然后 重新 调整 夫 结构 


击 1 轮 比 谱 上 3 人 交换 后 ) 


第 1 轮 比较 =3( 交 换 前 ) 
7 FA 
o fo 
六 芭 入 


起 点 :最 后 一 个 非 叶 
光大。 一 y 一 、 三 一 一 
人 ( 人 人 ( 人) 
AT 本 Je 
oo 


\ ac 
6 ) 人 侠 ; 的 症 癸 
必 Ra W、 /NI/ 
一 人 二 
(sa ) f。 ) 刁 
NU_ yy se 
5 sell "51417 辣 | 1 1s5|s "Ti sls 刁 


列 2 移 比 红 ES-172=1( 奖 并且 ) 各 2 匈 比 红 上 1 区 殉 后 ) 


PR PR 
(。，) (。) 
到 入 
一 、 ER y 一 、 
1 站 汉 
4 外 人 
人 ) 
) (ss) (5 
NS SA 
/一 《、 由 于 初 好 数组 已 经 是 一 个 最 小 夫 
人 1 3 和 4 交 次 之 后 , 4 这 个 元 素 无 需 在 和 10 比 
~ 一 ” 。 移 因 为 在 堆 诅 整 之 前 4 就 是 10 内 父 节 抽 
014|1 3|81|16 5 | 10 0 IE |8|6 5 | 10 
第 3 轮 比较 i=11-1V2=0 
.， 看 
无 利 交 澳 oa 
1 AS 
信 四 人 


甫 和 而 的 是 人 只 
Re 
(。) 
补丁 和 元 3, 到 /一 一 、 
达 TERity 和 (3 ) (1 


1. 提取 或 删除 根 节点 (顶端 节点 ), 重新 向 下 调整 堆 


(sift-adown) 


。 对 于 最 大 堆 , 提取 的 是 最 大 值 . 对 于 最 小 
堆 , 提取 的 是 最 小 值 . 

。 顶点 被 提取 之 后 , 要 重新 调整 数组 结构 , 保 
证 数组 任 然 是 最 小 (或 最 大 ) 堆 . 


1. 排序 过 程 


利用 二 叉 堆 的 特性 , 排序 束 是 循环 提取 根 万 点 的 过 
程 . 循环 执行 步骤 3, 直到 将 所 有 的 节点 都 提取 完成 ， 
被 提取 的 节点 构成 的 数组 就 是 一 个 有 序数 组 . 


注意 : 

。 如 需 升 序 排序 , 应 该 构造 最 大 堆 . 因为 最 大 的 元 
素 最 先 被 提取 出 来 , 被 放置 到 了 数组 的 最 后 , 最 
终 数组 中 最 后 一 个 元 素 为 最 大 元 素 . 

。 如 需 降 序 排序 , 应 该 构造 最 小 堆 . 因为 最 小 的 元 
素 最 先 被 提取 出 来 , 被 放置 到 了 数组 的 最 后 , 最 
终 数组 中 最 后 一 个 元 素 为 最 小 元 素 . 

。 堆 排序 是 一 种 不 稳定 排序 (对 于 相同 大 小 的 元 
素 , 在 排序 之 后 有 可 能 和 排序 前 的 先后 次 序 被 
打 乱 ). 


代码 演示 
将 乱 序 数组 [5,8,0,1o,4,6,1] 降 序 排列 
步骤 : 


1. 构造 最 小 堆 


Const minHeapSort = ar => { 

// 1. 构造 最 小 堆 

builLIadqMinHeap (arr) ; 

// 2. 循环 提取 根 节点 arz[0] ， 直 到 全 部 提取 完 

GE 
Let tmp = arcxz[0]; 
as 中 国王 这 | 囊 | 
本 避 基 三 且 Emi， 


有 机 E 玫 玫 OLE 


] ; 


// 把 整个 数组 构造 成 最 小 堆 
const builLldqMinHeap = ar => { 
ee ELGi < 全 2 证 
easn 晤 aeS， 
} 
Const startIndaex = Math.floor(arr.LIength / 
for (let 1 = statrtInadaex， 1 工 >= 0;) 1--) { 


加 国 @WIIRGGNe TS 本 2 ETiGite 本 二 


] ; 


// 从 startInqex 花 引 开 始 ， 向 下 调整 最 小 堆 

Const SiftDown = (artr，，SstartInadqex， endqInaexX) 
GOIOTSN 区 区 避 提 6 本 RN 男生 ENENNALGISS< 村: 
einSe caeolE GanRenGb< = 二 2 SEEIRNGE 汪 人 


Let SwapIndex = StatrtInadex，; 


et tmpNode = artr[statrtInadqeXx] ; 
If (LeftChildIndqx <= enaqInadqeXx) { 
人 PNOOE) | 
// 待定 是 否 交换 ， 因 为 *ight 子 节点 有 可 能 更 小 
tmPpNoae = arr[1LleftCcnhildInadx]:; 
SwWapInadex = LeftCchi1ladqInadx:， 


Ganaez 
全 WeNGoe 情 | 
// 比 1et 节 点 更 小 ， 蔡 换 swapIndex 
ETmIONGQES 琶 三 草本 1 和 J 划 盾 上 本 个 有 有 天 轩 开 下 纪 妥 | 
SwWapInadeXx = zightCchildqIndXx:， 


} 


If (SwapInadex !== StartInaex) { 
// 工 .交换 节点 
arr [swapIndqex]j = art[startIndqex]:，; 
arr [statrtIndex]j = 夺 mpNode， 


// 2. 递归 调用 ， 继 续 向 下 调整 


SIftDown (arr SwapIndex enadqIndex) ，; 


] ; 


测试 : 


3 
minHeapSort (arr1) ，; 
Gaonsolie 本 Go 7 IIORRESR 6 5 OO 汪 赂 ， 


VS 下 必 刘 三 芭 RES 
minHeapSort (arr2) ; 


ConEolIER GE 2 2 5 


3 二 ES 
minHeapSort (arr3) ; 


Gonmsolesooifaiee Si 信人 SI 


React 当中 的 使 用 场景 


对 于 二 叉 堆 的 应 用 是 在 scheduler 包 中 , 有 2 个 数 
组 taskousues 和 timeroueue, 它们 都 是 以 最 小 堆 的 形 
式 进 行 存储 , 这 样 就 能 保证 以 o(1) 的 时 间 复 杂 度 , 取 
到 数组 顶端 的 对 象 (优先 级 最 高 的 task). 


有 具体 的 调用 过 程 被 封装 到 了 scheadaulerMinHeap .js， 
其 中 有 2 个 函数 siftUup,siftDown 分 别 对 应 向 上 调 
整 和 向 下 调整 . 


type Heap = ACTay<Nodqe>， 


廿 xyYPpe Nodae = { | 
GOinloe 
SortInaqex: Pumberv 


蜂 这 


/ 添加 新 节点 ， 添加 之 后 ， 需要 调用 、 SIftUp 上 | 吸 数 向 上 计 
expDort function Push (heap: Heap，nodqe: Nodqe) 
Const inqex = heap.length; 
heap.Push (nodqe) ; 
SiftUp (heap，noaqe，，inadqex) ; 


查看 堆 的 顶点 ， 也 就 是 优先 级 最 高 的 "task ` 或 "timer、 


expDort function peek (heap: Heap): Node nul 
Const first = heap[0]，; 
xceturn first === Undqefinedq ? nul1l : first，; 


// 将 堆 的 顶点 提取 出 来 ， 并 删除 顶点 之 后 ， 需要 调用 ` sif 


expDort function pop (heap: Heap) : Node nu 


COmS 人 ss 起 heap[0]; 

If (first !== unaqaefined) !{ 
const last = heap.Pop() :; 
下 上 (人 SS 巧 是 NE 三 汪 丰 DOs2S ET 

heap[0] = Last; 
SEEDGOWnneaC SEO) 
} 


SEOSSt 


} else { 


SEO 上 必 , 


// 当 揪 入 节点 之 后 ， 需要 向 上 调整 堆 结构 ， 保证 数组 是 一 -/ 
EUDGERIGOnES 全 本 可 Di 全 ai 有 和 QS 有 有 
et inaqex = 工 ; 


while (rue) { 


const parentInadqex = (inadqeXx - 1) >>> 1 工 ; 

Const Parent = heap [ParentIndex]:; 

If _ (Parent !== unadefineaq && compare (Parei 
// The Parent 1s Larger。Swap Positions 
heap [ParentIndex] = noqe，; 
heap[inadqex] = Parent， 

Index = ParentIndex， 

} else { 


TeamemEEs 本 TaiRTE Ta 四 it 


TGS ED 的 8 


// 向 下 调整 堆 结构 ， 保证 数组 是 一 个 最 小 堆 . 
交 贡 ORGUEDIRGNRRE SS 区 贡 局 蕉 Si RRUORS Eee 有 二 有 | 
et inaqex = 工 ; 
const length = heap.LIength，; 
while (indqex < Length) ({ 


(KGNRNSNE 
CemsE 
GlenISNE 


KGDDRSNE 


ARE 


Eeeie 广 三 向 包 全文 汪 二 2 | 工 ， 
Left = heap[lLlefttInadqex]:，; 
zightInadex = LeftInadqeXx + 1， 
zight = heap[ridghtIndqex]'; 


the left or right noaqe 1s smallLer， 


If (left !== unaefineaq && compare (Left，，1 


下 所 


(Eight !== Undefinedq && compare (zidl 


heap[inaex]j = zight，; 


heap [zightIndex] = node:; 


Index = LightIndqex， 


} else { 


heap[inadqex]j = 1Left，; 


heapPp[lLeftIndqex]l = node:，; 


Inaqex = LeftIndexX， 


} else if (Fight !== Undefined && Compar 


heap[inaex]j = zight，; 


heap [zightIndex] = node，; 


indqex = LightIndqex，; 


} else { 
放生 NSO SERIES DR 


SEE 的 


。 peek 上 函数 : 查看 堆 的 顶点 , 也 就 是 优先 级 最 高 
的 task 或 timer. 

人 并 删除 顶点 之 
后 , 需要 调用 siftpown 函 数 向 下 调整 堆 . 

。 push 阴 数 : 添加 新 点 , 添加 之 后 , 需要 调 


用 sixtup 函 数 向 上 调整 堆 
。 siftDown 阴 数 : 向 下 调整 堆 结构 , 保证 数组 是 一 
个 最 小 堆 . 


。siftUp 阴 数 : 当 插 入 万 点 之 后 , 需要 向 上 调整 堆 
结构 , 保证 数组 是 一 个 最 小 堆 . 


/em 一 口 


本 万 介绍 了 堆 排序 的 基本 使 用 , 并 说 明了 堆 排 序 
在 react 源 码 中 的 应 用 . 在 阅读 scheduler 包 的 源码 
时 , 会 更 加 清晰 的 理解 作者 的 思路 


React 算法 之 帝 度 优先 遇 爵 


原文 : https:W/github.com/7kms/react- 
诈 Ustration-series/blob/main/docs/algorithnmy/ 
dfs.md 


title 
深度 优先 遍历 


对 于 树 或 图 结构 的 搜索 (或 蜗 历 ) 来 讲 , 分 为 深度 优先 
(DFS) 和 广度 优先 (BFS). 


深度 优先 遍历 : DFS( 英 语 :Depth-First-Search,DFS) 
是 一 种 用 于 遍历 或 搜索 树 或 图 的 算法 . 


来 和 目 wiki 上 的 解释 (更 权威 ): 当 节点 v 的 所 在 边 都 己 
被 探寻 过 , 搜索 将 回溯 到 发 现 节点 v 的 那 条 边 的 起 始 
万 点 . 这 一 过 程 一 直 进 行 到 已 发 现 从 源 世 点 可 达 的 所 
有 节点 为 止 . 如 果 还 存在 未 被 发 现 的 节点 , 则 选择 其 
中 一 个 作为 源 节点 并 重复 以 上 过 程 , 整个 进程 反复 进 


行 直到 所 有 节点 都 被 访问 为 止 . 


实现 方式 
DFS 的 主流 实现 方式 有 2 种 . 


1. 递归 (简单 粗暴 ) 
2. 利用 栈 存 储 遍 历 路 径 


UnietareonmENGOeE 人 NT 
本 hiIs.name = 三 1) 


已 由 Shen 荐 三 芭 辐 民 


用 CSEOnGSe 
console.1og('" 探 寻 阶 段 : !，noqe .name) ; 
冯 加 可 本 人 有 有 人 和 全 肌 且 人马 于 本 三 己 EEChnaRiG 且 三 之 于 

人 sehoaiay 过 
疝 瑟 


console.1og(' 回 溯 阶 段 : "，node .name ) ; 


1. 使 用 栈 


meieoionENGOeE 人 本 
this.name = 1; 


la en 下 三 冯 呈 导 


// 因为 要 分 辨 探寻 阶段 和 回溯 阶段 ， 所 以 必须 要 一 个 属 
// 如 果 不 打 印 探寻 和 回溯 ， 就 不 需要 此 属性 


this.visited = false，; 


netaien 王 GESieoeeyae 
KojoiSNEESNEEUGJCE | 光 
S 志 aelspashnrnooey)7 
// 栈 顶 元 素 还 存在 ， 就 继续 循环 
while ((noaqde = Stack[stack.length 一 工 ])) 1{ 
If (node . { 
console.1og(' 回 溯 阶 段 : "，node .name ) ; 


// 回溯 完成 ， 弹出 该 元 素 
Seaelksoolo)s 


} else { 
Geomsehe 要 [ec 人 探寻 阶段 : :，noqe .name ) ; 
nodqe .visitedq = 七 TuUe， 


// 利用 材 的 先进 后 出 的 特性 ， 倒序 将 节点 送 入 栈 中 
for (let 1 = noaqe.childqren.1Length - 工 ; 
SEEackeeushnecags 本 chn ieEED al 几 忆 


React 当中 的 使 用 场景 


深度 优先 遍历 在 react 当 中 的 使 用 非常 典型 , 最 主要 
的 使 用 时 在 ReactElement 和 fipber 树 的 构造 过 程 . 其 
次 是 在 使 用 context 时 , 需要 深度 优先 地 查找 消 


ReactElement " 树 " 的 构造 


ReactElement 不 能 算是 严格 的 树 结构 , 为 了 方便 表 
述 , 后 文 都 称 之 为 树 . 


在 react-reconciler 包 中 ，ReactElement 的 构造 过 
程 实际 上 是 仍 套 在 fiber 树 构造 循环 过 程 中 的 ， 

与 fibezr 树 的 构 和 僻 是 相互 交 蔡 进行 的 

(在 tibet 树 构建 章节 中 详细 解读 , 本 节 只 介绍 深度 优 
先 遍 历 的 使 用 场景 ). 


ReactElement 树 的 构造 ， 实际 上 就 是 各 级 组 
件 rendaer 之 后 的 总 和 . 整个 过 程 体现 在 reconciler 
工作 循环 之 中 . 


源码 位 于 ReactFiberWworkLoop js 中 ， 此 处 为 了 简 
明 , 已 经 将 源码 中 与 dfs 无 关 的 旁 支 妈 辑 去 掉 . 


ETIGeenm 本 NoneeoeSymcC 从 更 站 
// 1. 最 外 层 循环 ， 保 证 每 一 个 节点 都 能 遍历 ， 不 会 遗 江 
while (workInProdgress !== nul1lL) { 


PerformUnitoOofWork (worKInProdgress) ; 


的 enERelg 间 ci 的 履 57 区 5 风 区 6 疝 册 einele 人 pigs 放 攻 9 冯 人 eielsS er=o 

Const current = unitOofWork .alternate， 

et mext，; 

// 2. beginNWork 是 向 下 探寻 阶段 

next = beginWorKk (CUurenty，，unitoOofWorKk，， subta 

If (next === mnulL1L) 1{ 
// 3. completeUnitOofWork 是 回溯 阶段 
CompleteUnitofWork (unitoOofWork) ; 

} else { 


WOTKIDPFrogress = mext， 


function completeUnitoOofWork (unitOofWork :| Eibei 
Jet _ completedqWork = unitOfNWorK:， 


加 GE 
Const CuUrtrent = CompletedqWork .alternate，; 
Const LetutcnEipber = CompletedqWNWorKk .zetutcn， 


et mext，; 
// 3.1 回溯 并 处 理 节 点 


next = Comp1leteWork (CUrLent， completedqWeori 


文臣 有 人 三 本 本 本 


// 判断 在 处 理 节点 的 过 程 中 ， 是 否 派生 出 新 的 节点 


WOTKIDPFogress = mext， 
etuzn， 
} 
Const SiblingEiper = CompletedqWork .Siplixi 
// :3.2 州 断 是 否 有 和 劳 文 
CS OECDoee 三 三 昌 记 让 可 定居 下 人 
WOLTKInProdtess = SipbplingEFiper; 
etuznmy， 


】} 
// 3.3 没有 劳 支 继续 回溯 


CompletedqWork = LeturnEiper， 
WOrKIDPFrodgress = CompletedqWork， 
}) while (completeqNWork !== nul1lL) ，; 


以 上 源码 本 质 上 是 采用 递归 的 方式 进行 dfs, 假设 有 
以 下 组 件 结构 : 


Class APP extendqs React .Component { 
Cenaqer () { 
下 已 世 着 疏 OA 
<QqivV className="appP"> 


<heaasz>nheaaqasr< eaae> 


<Content /> 
<footer>footer</footeLr> 
</divV> 
) ;7 


Class Content extendqs React .Component 
Cenaqer () { 
下 外 
<React .Ragment> 
KR 站 有 和 匈 过 
< 二 光 < 这 
有 让 2BK7 过 
</React .Fradgmen 七 > 
) 7 


export Qefault ApP， 


则 可 以 绘制 出 损 历 路 径 如 下 : 


ReactElement 结 构 (DFS 人 遍历 路 径 ) 


beginWork ”e 一 一 
tyPe=class(APP) 


1 
和 与 Props. Ho 。 


type= "div” 


completeWork 一 一 盖 


Props. es 


个 数组 


type= "header” 4 14 type= “footer” 
@@ 和。 type=class(Content) 全 
props.children= "header” 


和 量 


props.children= "footer” 


Props. -- 


type=React.Fragment 


Props. Ts 
个 数组 


type=“p" type=“p" type=“pP" 
props.children= “1” props.children= “2” props.children= “3” 


注意 : 


。 ReactElement 树 是 在 大 循环 中 的 beginwork 阶 
段 " 逐 级 "生成 的 . 

" 逐 级 "中 的 每 一 级 是 指 一 个 class 或 function 类 
型 的 组 件 , 每 调用 一 次 *enaez 或 执行 一 
次 function 调 用 , 就 会 生成 一 批 ReactElement 


有 局 : 
。 ReactElement 树 的 构造 , 实际 上 就 是 各 级 组 


件 renqer 之 后 的 总 和 . 


fiber 树 的 构造 


在 ReactElement 的 构造 过 程 中 , 同时 伴随 着 fiber 树 
的 构造 ，fiper 树 同样 也 是 在 beginwork 阶 段 生 成 的 . 


绘制 出 秽 历 路 径 如 下 : 


Fiber Tree(DFS 遍 历 路 径 ) 


beginWork 一 一 一 一 一 上 HostRootFlber 


completeWork 一 一 人 


1 AN 
:footer | 


查找 context 的 消费 节点 


当 context 改 变 之 后 , 需要 找 出 依赖 该 cocntext 的 所 
有 子 节点 (详细 分 析 会 在 context 原 理 章节 深入 解读 )， 
这 里 同样 也 是 一 个 DFs, 具体 源码 在 
ReactFiberNewContext.js. 


将 其 主干 逻辑 剥离 出 来 , 可 以 清晰 的 看 出 采用 循环 递 
归 的 方式 进行 远 历 : 


export function PropadgateContextChange ( 
WOLTKInProdtress: ERibper， 
Context : ReactContexXxt<mixed>， 
chandgedqBits: number， 
CendqerLanes: Lanesy， 
下 SEXeiaual| 
et fiber = WOTrKIDnProgress .chilad; 
while (fipbper !== mul1) { 
et PPnexXxtEiber， 
广 人 Saeenwns 人 NoE 


Const 11ist = fiper.aqependqencies:， 

下 (人 IST 三 日 说 OU AH 
// 匹配 context 等 逻辑 ， 和 aqfs 无 天， 此 处 可 以 暂 
筷 

} else { 
// 向 下 探寻 


nextEipbper = fipbper.chil1ad'; 


flibpexr = mextEiper， 


总 结 
由 于 *eact 内 部 使 用 了 ReactElement 和 和 fiber 两 大 树 
形 结构 , 所 以 有 不 少 关 于 节点 访问 的 逻辑 . 


本 万 主 要 介绍 了 pFs 的 概念 和 它 在 react 源 码 中 的 使 
用 情况 . 其 中 fiber 树 的 opFs 遍 历 , 涉及 到 的 代码 多 ， 
分 布 三 ， 涵盖 了 reconciler 阶 段 的 大 部 分 工作 ， 

是 *econciler 阶 段 工作 循环 的 核心 流程 . 


除了 prs 之 外 , 源码 中 还 有 很 多 逻辑 都 是 查找 树 中 的 
节点 (如 : 向 上 碍 找 父 节 点 等 ). 对 树 形 结构 的 遍历 在 
源码 中 的 比例 很 高 , 了 解 这 些 算法 技巧 能 够 更 好 的 理 
解 react 源 码 . 


悍 


考 资料 
深度 优先 搜索 


React 算法 之 链表 操作 


原文 : https:W/github.com/7kms/react- 
诈 Ustration-series/blob/main/docs/algorithnmy/ 
linkedlist.md 


title 
链表 操作 


来 目 wiki 上 的 解释 : 链表 (Linked list ) 是 一 种 弟 见 
的 基础 数据 结构 , 是 一 种 线性 表 , 但 是 并 不 会 按 线性 
的 顺序 存储 数据 , 而 是 在 每 一 个 节点 里 存 到 下 一 个 节 
点 的 指针 (Pointen). 由 于 不 必须 按 顺序 存储 ， 链 表 在 
插入 的 时 候 可 以 达到 O(1) 的 复杂 度 , 但 是 查找 一 个 
书 点 或 者 访问 特定 编号 的 节点 则 需要 O(m) 的 时 间 . 


1. 单 向 链表 : 每 个 节点 包含 两 个 域 , 一 个 信息 域 和 
一 个 指针 域 . 这 个 指针 指向 列表 中 的 下 一 个 世 


2. 双向 链表 : 每 个 节点 有 两 个 连接 , 一 个 指向 前 一 


个 节点 (第 一 个 节点 指向 空 值 ), 而 另 一 个 指向 下 
一 个 节点 (最 后 一 个 节点 指向 空 值 ). 

3. 循环 链表 : 在 单 向 链表 的 基础 上 , 首 节 点 和 末节 
点 被 和 连接 在 一 起 . 


单 向 链表 
mA 人 AN 
1 人 next \， next ;| \ 
(1 护 2 3 


循环 链表 
next nestt 
下 wo 一 ea 一 
辽 
| 助 2 } 3 1) 
所 下 、_/ ss 1/ 
next 


基本 使 用 


1. 忆 点 插入 , 时 间 复 杂 度 o (1) 
2. 节点 查找 , 时 间 复 杂 度 o (n) 


3. 节点 删除 , 时 间 复 杂 度 o (1) 
4. 反 转 链表 , 时 间 复 杂 度 o (n) 


// 定义 Node 节 点 类 型 


function Nodqe (name) { 


this.name = name， 
this.next = nul1，; 
】 
// 链表 
EeeonunEece 


this.headqd = new Nodqe ('headq' ) ， 


// 碍 找 nodqe 节 点 的 前 一 个 节点 
SR 和 ewiiOUS 三 晤 UneceGnnoee 
et _ currentNodqe = this.head，; 
while (curtentNodqe && currentNodqe .next !:= 
CUTEentNodae = CUTTentNodqe .nexXxt ，; 
】 


Ceturn CuUrrentNode ，; 


] ; 


// 在 nodqe 后 插入 新 节点 newE1Lement 
this.insetrt = function (name，noaqe) { 
Const newNodqe = new Nodqe (name) ; 


newNodqe .next = mnodqe .next， 


nodqe .next = mnewNode，; 


] ; 


// 删除 节点 

this.remove = function(nodqe) ({ 
Const PreviousNode = this.findqPrevZious (nm 
If (PreviousNodqe) { 


PreviousNodqe .next = nodqe .next， 


] ; 


// 反 转 链表 

this.reverse = function () ({ 
Jet Prev = mul1，; 
et _ current = this.head， 


while (current) { 


Const 七 emPNode = CUrtrent .next，; 

// 重新 设置 next 指 针 ， 使 其 指向 前 一 个 节点 
GeneSioe SSE 三 下 oncSN7 

// 游标 后 移 

ee 省 三 王 @Ueise mit 

CULTrTent = 七 emPNoqde; 


】} 
// 重新 设置 head 节 点 


this.headq = CUTTent ， 


] ; 


React 当中 的 使 用 场景 


在 react 中 , 链表 的 使 用 非常 高 频 , 主要 集中 在 fiber 
和 hook 对 象 的 属性 中 . 


fiber 对 象 
在 react 高 频 对 象 中 对 fiber 对 象 的 属性 做 了 说 明 ， 
这 里 列举 出 4 个 链表 属性 . 


1. effect 链 表 ( 链 式 队列 ): 存储 有 副作用 的 子 世 


注意 : 此 处 只 表示 出 链表 的 结构 示意 图 ， 


在 fiber 树 构造 章节 中 会 对 上 图 的 结构 进行 详 
细 解 读 . 


5. updateoueue 链 表 ( 链 式 队列 ): 存储 将 要 更 新 的 
状态 , 构成 该 队列 的 元 素 是 update 对 象 


。 fiber.updqateQueue .Pendind: 人 存 储 state 
更 新 的 队列 ( 链 式 队列 )，class 类 型 节点 
的 state 改 动 之 后 ， 都 会 创建 一 个 updqate 对 
象 添加 到 这 个 队列 中 . 由 于 此 队列 是 一 个 
环形 队列 , 为 了 方便 添加 新 元 素 和 快速 拿 
到 队 首 元 系 , 所 以 penaing 指 针 指向 了 队列 


中 最 后 一 个 元 素 . 


注意 : 此 处 只 表示 出 链表 的 结构 示意 图 ， 
在 状态 组 件 (class 与 function) 章节 中 会 对 上 
图 的 结构 进行 详细 解读 . 


Hook 对 象 


在 react 高 频 对 象 中 对 aoox 对 象 的 属性 做 了 说 
明 ，aook 对 象 具备 .next 属 性 , 所 以 toox 对 象 本 身 就 
是 链表 中 的 一 


此 处 hook .Cueue 。 pending 也 构成 了 一 个 链表 ， 
将 hook 链 表 与 hook .Gueue .。 pending 链 表 同 时 表示 在 
图 中 , 得 到 的 结构 如 下 : 


Fiber emoizedSt Hook queu pendane 本 ex 外 ext es 
meadt nextt 
pdate update pdate 
Hook queu pendint 上 eadt 1 下 2 
nedt 
外 next 
Hook 。 queue 。 pendne ss next 人 人 


注意 : 此 处 只 表示 出 链表 的 结构 示意 图 ， 


在 hook 原理 章节 中 会 对 上 图 的 结构 进行 详细 解读 . 


链表 合并 

在 *eact 中 , 发 起 更 新 之 后 , 会 通过 链表 合并 的 方式 把 
等 待 (gendaing 状 态 ) 更 新 的 队列 (upaateoueue) 合 并 
到 基础 队列 (class 组 

件 :fiber.updateoueue .firstBaseUpdate;function 
组 件 : hook.baseoueue)， 最 后 通过 电 历 baseoueue 筛 
站 组 合成 最 终 的 组 件 
状态 (state). 这 这 过 程 发 生 在 reconciler 阶 段 ， 分 别 


涉及 到 class 组件 和 function 组 件 . 
具体 场景 : 
1 . class 组 件 中 


。 在 class 组 件 中 调用 setstate, 会 创 
建 upaate 对 象 并 添加 
到 fiber.updateoueue.shared.pending 


链 式 队列 (源码 地 址 ). 


expDort function endqueueUpdate<State> ( 
const_ updateQueue = fibper.updqateQue 
] 
Const sharedeueue : SharedQueue<sStat 
// 将 新 的 update 对 象 添加 到 fiber .update 


const pending = Sharedqeueue .Pending 


If (Pending === nul1) { 
Update.next = update，; 

} else { 
Update.next = Penadqind.next， 


Penadqindg.next = updqate， 
} 


Sharedqoueue .penaing = update， 


由 

于 fiber.updateoueue .shared.pending 
是 一 个 环形 链表 , 所 

以 fipbper.updateoueue .shared.pending 
永远 指向 末尾 元 素 ( 保 证 快速 添加 新 元 素 ) 


AN | wpaai | 
co -| 
一 ~ 
per oo em [党 广 一 paalel 
站 一 一 
人 一 一 oa 


在 fiber 树 构建 阶段 (或 econciler 阶 段 )， 


公 、 
DA 


把 fiber.updateoueue .shared.pendqing 
合并 
到 fiber.updateoueue .firstBaseUpdate 


队列 上 (源码 地 址 ). 


expDort function ProcessUpdateQueue<St 
WOLTKInProdtress: Eibperyv 
加 GilosE DY 
instance: anyyv 
zendqerLanes: Lanesy， 
JR Soatol | 
nsEUSEEaay7SEnonEenola em a C1a 


const dueue: UpdateQueue<sState> = (人 


et firstBaseUpaate = queue.firstBa 
Let LastBaseUpdate = Gueue.1astBase 
] CheckR if thece are psnainoglupadat 
et penadqingoueue = dueue.shared.pen 
If (Pendaqingoueue !== nulL1L) { 
queue .Shared.pending = nul1l:， 
// The pendind dueue is circular. 
smeoEISSEES SENS HE 本 已 =C1Lzc 
const LastPendqingUpadate = Pendqing 
Const fixrstPendqingUpdate = LastPe 
astPenadqingUpadate .next = nul1l，; 
// Append Pendqing updates to base 
If (LastBaseUpadate === nulL1L) { 
fixrstBaseUpdate = ficstPenadqingU 
} else { 
astBaseUpdate.next = firstPenad 
} 
1astBaseUpdate = LastPendqingUpadat 


pdateQueuol 列 合并 过 程 (全 并 前 ) 


葵 旺 asoupdate 
1 一- 2 
下 JJ 


5 


Update 一 一 一 一 


-加 


一 一 


4. function 组 件 中 


。 在 function 组 件 中 使 用 Hook 对 象 
(usestate), 并 改变 Hook 对 象 的 值 (内 部 会 
调用 ai spatchaAction), 此 时 也 会 创 
建 updaate (hook) 对 象 并 添加 
到 hook.sueue.pending 链 式 队 列 (源码 地 
址 )， 


E hook .queue .pending 也 是 一 个 环形 链表 
(与 fiber.updateoueue .sharedq.pending 


的 结构 很 相似 ) 


EUneBOnEEaaSsaEEhNSETOnS 
fiper: Fiper， 
queue: UpdateQueue<S，A>， 
COmE 六 
) 
// ... 省 略 部 分 代码 
const pendqindg = Gdqueue.pendind， 
If (Penaing === nulL1L) { 
// This is the first upadqate.， Crea 
Update.next = update， 
}) else { 


Update.next = Penadqind.next， 


Penadqindg.next = updqate， 


} 


queue .Dendind = update'， 


本 在 fiber 树 构建 阶段 (或 reconciler 阶 段 )， 
会 将 hook .aueue .pending 合 并 


到 hoorkx . baseoueue 队 列 上 (源码 地 址 ). 


function upaateReducer<S，I，A>( 
redqducer: (S，A) => S， 
99 屿 证 ASC 
aalaE 色 三 过 

屋 IS DSSEEeESSE | 
// ... 省 略 部 分 代码 
If (Penadqingoueue !== nulL1L) 1{ 

If (baseQueue !== mul1) { 


// 在 这 里 进行 队列 的 合并 


Const baseFirst = baseQueue .nn 


Const PendqingEirst = PenadqingcC 


baseQueue .next = PendqingEFIirSst 


Penadingeueue .next = baseFirst 


} 


CUTTent .baseoOueue = baseQOueue 


queue .Dendind = DulL1l; 


hookbasequeuef 并 有] 


ook paseaueaete 问 


总 结 

本 节 主 要 介绍 了 链表 的 概念 和 它 在 *eact 源 码 中 的 使 
用 情况 . *eact 中 主要 的 数据 结构 都 和 链表 有 关 , 使 
用 非常 高 频 . 源码 

中 链表 合并 ， 环 形 链表 拆 解 ， 链 表 人 遍历 的 代码 篇 幅 很 多 ， 
所 以 深入 理解 链表 的 使 用 , 对 理解 react 原 理 大 有 益 


芭 


React 算法 之 材 操 作 


原文 : https:W/github.com/7kms/react- 
诈 Ustration-series/blob/main/docs/algorithnmy/ 
stack.md 


title 
栈 操 作 


来 自 wiki 上 的 解释 : 堆栈 (stack) 又 称 为 栈 或 堆 玛 , 是 
计算 机 科学 中 的 一 种 抽象 资料 类 型 , 只 允许 在 有 序 的 
线性 资料 集合 的 一 端 ( 称 为 堆栈 顶端 top) 进 行 加 入 数 
据 (eush) 和 移 除数 据 (pop) 的 运算 . 因而 按照 后 进 先 出 


(LIFOo，Last In First out) 的 原理 运作 . 
注意 : 


。 栈 (stack) 又 叫做 堆栈 , 这 里 特 指数 据 结构 中 的 材 
( 另 一 种 程序 内 存 分 配 中 的 栈 , 本 系列 不 做 介绍 ， 
读者 可 自行 了 解 ). 


。 堆栈 中 虽 带 有 一 个 堆 字 , 只 是 命名 , 不 要 和 堆 混 
清 . 

。 旬 说 的 堆 有 2 种 指 代 , 一 种 是 数据 结构 中 的 堆 ( 在 
React 算法 之 堆 排 序 中 有 介绍 ), 另 一 种 
是 程序 内 存 分 配 中 的 堆 ( 本 系列 不 做 介绍 , 读者 可 
自行 了 解 ). 


寺 性 


必 ET 
2. 除 头 尾 节 点 之 外 , 每 个 元 素 有 一 个 前 驱 , 一 个 后 


基本 使 用 


1. 讨 枝 : push () 
2. 弹 栈 : pop (( 


3. 预览 栈 顶 元 素 : peek () 


Chass 昌 Seaicels| 
Goneaaieecenoy | 
ELETEEISEeE 
ERS 本 蔚 G 它 是 三 本 0 
】 


// 压 枝 


Push (elLement) { 
本 nis.dqataStore [this .op++] = element， 


// 弹 栈 
Bei 人 
SEEDainEIoRRS GEIEEISEGNSEE 王 贡 和 RS Ecoleil 太 


// 预览 栈 顶 元 系 
eekiO 
SEE IEIEESEaoashaoEEESE oo 1 喇 几 


// 检测 材 内 存储 了 多 少 个 元 素 
IE 


SEE 六 攻 Eee 这 


// 清空 栈 


Clear() { 
LESLIE ED 


测试 代码 : 


Const test = () => ({ 
Comststacls 三 划 mswS 世 aeGs 但， 
console.1log('" 压 枝 a: '); 
SEE SREEE 
console.1og('" 压 枝 b: '); 
SEE 
console.1og('" 压 枝 c: '); 


] ; 


SEEaelsRUSR Ce 二 
GorsoeilesEodgl ' 栈 高 度 : |) 7 
“作风 元 冯 RON 
EEC 了 
console.1og(' 栈 顶 元 素 : '，stack.peek()); 
console.1og('" 压 枝 a: '); 
SEEGIDSUSRLGL 


Gaonseoleskeogl 


Console.1Lod 


人 
t 
人 
人 


console.1og(' 材 顶 元 素 : '，stack.peek()) ; 
' 清空 栈 : ") ; 
) 7 
GorseliesEoo ' 栈 高 度 : SEEIGUESIUSIRONEIAR OO 放 肘 : 
console.1og('" 压 枝 s: '); 
SEEiIGl<aoSITRUCSEE 


Gaomsoieeeg 


stack .CTLeaLr 


人 
人 
人 
人 


console.1og(' 栈 顶 元 素 : '，stack.peek1()):; 


利用 栈 先 进 后 出 的 特性 , 在 实际 编码 中 应 用 非常 广 
沁 . 如 回溯 ,递归 ,深度 优先 搜索 等 经 典 算法 都 可 以 利用 
枝 的 特性 来 实现 . 由 于 本 文 的 目的 是 讲解 栈 react 中 
的 使 用 场景 , 所 以 与 栈 相 天 的 经 典 案例 本 文 不 再 列 
举 , 请 读者 移 步 其 他 算法 资料 . 


React 当中 的 使 用 场景 


Context 状态 管理 {#context} 


在 fiber 树 创建 过 程 中 , 如 果 使 用 了 context api( 具 
体 来 说 是 使 
用 context .PrOViader，ClLass.contexXtTyPe，ContexXt .Cons 


部 会 维护 一 个 栈 来 保存 提供 者 (context .Provider) 
的 状态 ， 供给 消费 者 (context consumer) 使 用 . 


首先 看 stack 的 定义 (ReactFiberStack.js 中 ): 


expPort type StackCursSsor<T> = 三 { | GUIeenmits: 工 国 


// 维护 一 个 全 局 stack 
GaonmsegEzaeSsack :Aceay<arnmy> 古 三 双 癌 | 帮 


Jet indqex = 一 |; 


// 一 个 工厂 图 数 ， 创建 stackcursor 对 象 


function createCcCursor<IT> (aefaultValue: TIT) : St 
GEAENEDISI9i | 
CUTEent : QefaultValuey， 
} 1; 
} 


neteiongisRmotn 似 王 Deoohssan 且 | 
Ceturn inaqex === 一 1 ); 

】 

// 出 栈 


ULeonE<T (WESOc Sackeuaoe< 天 和 1Lbea 


全 文生 < 王 0D 


Eee 
} 
CULTSOLC .CuUrtent = ValueStack [inaqex]，; 
ValueStack [inadqex]l = nul1l，; 
InaexXx- 一 一， 
} 
已 入 枝 
人 下 站 本 已 遇 全 < KeUESG 了 3 攻 本 他 村人 SG 有 Te，Vali 
InaeX++， 
// 注意 : 这 里 存储 的 是 cursor 当 前 值 ， 随后 更 新 了 cn 
ValueStack [inadex]j = cursor .Curent ， 
CULTSOL .CuUrtent = Value， 


在 ReactFiberstack.js 源 码 中 , 定义 的 valuestack 


作为 全 局 变量 , 用 来 存储 所 有 

的 stackcursor.current( 不 仅仅 存 

储 context api 相 天 的 stackcursor， 

在 context 原理 章节 中 详细 解读 , 本 节 只 讨论 
与 context api 相 天 的 材 操 作 ). 


注意 stackcursor 是 一 个 泛 型 对 象 ， 
与 context api 相关 的 stackcursor 定 义 


在 ReactFiberNewContext “本 己 。 


// 定义 全 局 valueCcursor， 用 于 管理 <Context .Provi 


Const ValueCursor: StackCursor<mixedq> = Creat 
// .. .省 略 无 关 代 码 


// 将 context 当 前 的 值 保 存 到 valuecursozr 中 ， 并 设置 < 

// 运行 完成 之 后 context 为 最 新 状态 

expDort function PushProviader<IT> (ProviaderEFipbesa 
Const Context : ReactContext<T> = PEOoVZiaeTrE: 
Push (vaJueCursor，，， context .CurrentValue Pi 


ContexXxt ._CUTrrentValue = mnextValLue，; 


// 取出 valuecuzrsor 中 保存 的 旧 值 ， 设置 到 context ._c 
// 运行 完成 之 后 context 恢 复 到 上 一 个 状态 


expPort function PopProviader (ProvViaderEipber : 下 : 
const currentVvValue = ValueCursor .CuUrrent ， 
Pop (valLueCursor，， ProviadqerEFibper) ; 
Const Context : ReactContext<any> = Providei 


ContexXxt ._CUTrrentValue = CUTTentValLue， 


假设 有 如 下 组 件 结构 (平时 开发 很 蕉 有 这 样 的 代码 ， 
此 处 完全 是 为 了 演示 context api 中 涉及 到 的 栈 操 
作 ): 


Const MYyContext = React .createContext (0) ; 


SONICGNESECTO AS 全 天 二 | 
zeturzn (人 
// 第 一 级 
<MyContext .PoVidqer Value=({1L)}> 
<NMMeoemieexeecConeume 
{Valuel => (人 
// 第 二 级 族 套 
<MyContext .Provider Value={12】}> 
SMWEoemkesEeComSUme 之 
{Value2 => (人 
// 第 三 级 议 套 


<MyContext .Provider Value=1{3 


MEemeexeecEensmmee 
{value3 => (人 
<SPaDn> 
{Valuell-=-{value2} 一 {V: 
</sPan> 
出 
</MyContext .ConsumeL> 
</MyContext .Provider> 


) 
</MyContext .ConsumeLz> 


</MyContext .PoVZiqdqer> 


) } 
</MyContext .ConsumeLz> 


</MyContext .Provider> 
) ;7 


可 在 coaesandbox 中 查看 运行 结果 . 


将 fiber 树 构造 过 程 中 Mycontext 对 象 在 栈 中 的 变化 
情况 表示 出 来 : 


1 . beginWwork[ 介 段 : 入 枝 


本 reconciler 之 前 ， 外 


于 const MyYyContext = React .createContext (0 ) 


经 创建 了 Mycontext 对 象 , 所 以 其 初始 值 
是 0， 

。 reconciler 过 程 中 , 每 当 遇 
到 context .Proviader 类 型 的 节点 , 则 会 执 


行 pushProvider， 


context 状 态 与 栈 操作 (beginWork) 


1 . completeWwork[ 介 段 : 出 栈 


reconciler 过 程 中 ， 每 当 遇 
到 context Providezr 类 型 的 节点 ， 则 会 执 
行 popProvider. 


忆 reconciler 之 


后 ， valueSstack 和 valuecursor 以 


及 Mycontext 都 恢复 到 了 初始 状态 . 


。 本 书 只 分 析 context 实 现 源码 中 与 栈 相关 的 部 
分 ,所 以 只 涉及 到 了 context .Providezr( 供 应 
者 ) 万 点 . 

对 于 context .consumezr( 消 费 者 ) 以 及 更 新 阶 
段 context 的 运行 机 制 的 深入 解读 放 
在 context 原 理 章节 中 . 


executionContext 执行 上 下 文 


executioncontext 是 在 ReactFiberworkLoop .js 中 
定义 的 一 个 全 局 变量 (相对 于 该 财 包 ), 且 定 义 成 二 进 
制 变量 ， ee 算法 之 
位 运算 一 文中 已 有 介绍 ). 


表面 上 看 sxecutioncontext 和 栈 并 ; 全 有 直接 关系 ， 
但 实际 在 改变 executioncontext 的 时 候 , 巧妙 的 利 
用 函 数 调用 栈 , 实现 sxecutioncontext 状 态 的 维护 . 


本 贡 主 要 是 本 现 executioncontext 和 函数 调用 栈 之 间 
的 配合 运用 (有 具体 源码 )， 这 里 以 bat cheaqUpadates 


和 unbat cheaqUpadqates 为 例 进 行 分 析 . 


exXxpDort function batchedqUpadates<A，R>(fn: 和 = 
// 在 执行 回调 之 前 ， 先 改变 executionContext 


Const PrevZEXecutionContexXxt = exXecutionCont 
SXxeculoneEonee 文 攻 医 BaeceheacenmnEee 基 te 
trzYy { 
SEN 人 0 全 动 且 
证 是 
// 回调 执行 完毕 之 后 ， 再 恢复 到 以 前 的 值 prevExec 
exXxecutionContext = PreVExecutionContext ，; 


// ... 省 略 无 关 代码 


exXxpPort function unbatchedqUpdates<A，R>(En: (: 
ConsSst PreVEXecutionContext = exXxecutionConts 
eXecutionContext &= ~BatcheadContexXt 
exXecutionContexXt 性 LegacyUnbatcheaqContexXxt:; 
全 
ISTUDDG DER GE 二 区 
人 二 间 L 


exXxecutionContext = PreVExXxecutionContext ，; 


// .. .省略 无 关 代码 


// .. .省略 其 他 函数 


这 些 浮 数 的 共性 : 


1. 执行 回调 之 前 , 先 保存 当前 值 
为 prevExecutionContext， 再 改 
变 executionContext. 
2. 在 执行 回调 fn 期 间 , 无 论 函 数 fn 调 用 栈 有 多 深 ， 
被 改变 过 的 sxecutioncontext 始 终 有 效 . 
3. 回调 执行 完毕 之 后 , 恢复 到 以 前 的 
值 PreVZEXecutionContexXt. 
总 结 
本 节 主 要 介绍 了 栈 在 *eact 源 码 中 的 使 用 情况 . 涉及 
入 栈 出 栈 等 基本 操作 (context 状态 管理 ), 以 及 对 上 子 
数 调用 材 的 巧妙 运用 (改变 executioncontext 执 行 上 
下 文 ). 


由 于 reconciler 过 程 是 一 个 深度 优先 贺 历 过 程 , 对 
于 fibez 树 来 讲 , 向 下 探寻 (beginwork 阶 段 ) 和 岗 上 回 
溯 (completework 阶 段 ) 天 然 惑 和 枝 的 入 枝 (pusnh) 和 出 
材 (pop) 能 够 无 颖 配合 (context 机 制 就 是 在 这 个 特性 
上 建立 起 来 的 ). 


React 算法 之 调和 算 ; 


原文 : https:W/github.com/7kms/react- 
iuUstration-series/blob/main/docs/algorithnmy/ 
diff.md 


title 
调和 算法 


概念 


调和 上 男 数 (源码 ) 是 在 fiber 树 构 (对 比 更 新 ) 过 程 中 
对 旧 fiber 节 点 与 新 reactElement 进 行 比较 , 判 
定 旧 fiber 节 点 是 否 可 以 复 用 的 一 个 比较 函数 . 


调和 上 函数 仅 是 fiper 树 构造 过 程 中 的 一 个 环节 , 所 以 

在 深入 理解 这 个 函数 之 前 , 建议 对 fiber 树 构造 有 一 

个 宏观 的 理解 (可 以 参考 前 文 fiber 树 构造 (初次 创建 )， 
fiber 树 构造 (对 比 更 新 )), 本 节 重 点 探讨 其 算法 的 实 

现 细 节 . 


它 的 主要 作用 : 


1. 给 新 增 ,移动 ,和 删除 节点 设置 fiber.flags( 新 
增 , 移动 : Placement, 删除 : peletion) 

2. 如 果 是 需要 删除 的 fiper, 除了 自身 打 
上 peletion 之 外 , 还 要 将 其 添加 到 父 节 点 
的 effects 链 表 中 (正常 副作用 队列 的 处 理 是 
在 completework 辑 数 , 但 是 该 节点 (被 删除 ) 会 脱 
离 fiber 树 , 不 会 再 进入 completework 了 阶段 ,所 
以 在 beginwork 阶 段 提 前 加 入 副作用 队列 ). 


特性 


算法 复杂 度 低 , 从 上 至 下 比较 整个 树 形 结构 , 时 间 复 
采 上 度 被 缩短 到 O(n) 


基本 原理 


1 . 比较 对 象 : fiber 对 象 与 ReactElement 对 象 相 
比较 . 


。 注意 : 此 处 有 一 个 误区 , 并 不 是 两 棵 fiber 
树 相 比 较 , 而 是 旧 fiber 对 象 
与 新 ReactElement 对 象 向 比较 , 结果 生成 


。 可 以 理解 为 输入 ReactElement, 经 


过 reconcilechildqren() 之 后 , 输出 fiper. 


4. 比较 方案 : 


。 单 万 操 比较 
。 可 和 代 避 比 较 


里 忆 避 比 较 
音节 点 的 逻辑 比较 简明 , 先 直 接 看 源码 : 


// 只 保留 主干 逻辑 

function reconcileSing9dleElement ( 
站 全 臣 疝 下 人 区 划 G 全 下属 Se 
SETISOEESS 二 天 | 攻 阅 IF 
eement : ReactEJementy， 
anes: Lanesy， 

) : Fiper 1{ 


Const Key = element .Key:; 


SEEalninaKe 基 三 感 cpSnSEDNEISaSRSAEGINSREe 太 

while (chilad !== mul1l1) { 
// _ currentEirstchildq !== nul1， 表 明 是 对 比划 
If _ (child.key === key) { 


// 1. key 相 同 ， 进 一 步 判 断 child.elementTy 
SWeelnatehhoaliaR 芭 ao) 是 时 
// 只 看 核心 逻辑 


Qefault: { 

IfE (child.elLlementType === elLement .t 
// 1.1 已 经 匹配 上 了 ， 如 果 有 兄弟 节点 ， 
QqeleteRemainindCchildren (zetuznEFIiL 
// 1.2 构造 fiber 节 点 ， 新 的 fiber 对 象 


Const existind = UseEipbper (chilad， 
exXlistindd.ref = CoerCceRef (上 eturnE: 
exlistindd.return = zeturnEiber， 


zetuzrn existind; 


} 


Dreak'， 


】 
// Diqn't match. 给 当前 节点 点 打上 Deletion 
QqeleteRemainindCchildren (returnEipbper， cl 
Dreak， 

} else { 
// 2. key 不 相同 ， 匹 配 失败 ， 给 当前 节点 打上 De 
Qqeletecnhild(returnEiper， chila) ，; 


】 
Ga 辣 三 本 Easyianwng ， 


// .. .省 略 部 分 代码 ， 只 看 核心 逻辑 


// 新 建 节 点 


Const createdq = CreateEFipbperEFzromElement (elLer 
Createdq.tref = CoerCceReft (eturnEiber，，， curer 
Createdq.return = retuzrnEiper， 


Ceturn created); 


1. 如 果 是 新 增 节 点 , 直接 新 建 fiber 没有 多 余 的 逻 
辑 
2. 如 果 是 对 比 更 新 


。 如 果 key 和 type 都 相同 


( 即 : ReactElement .key === ERIper .key 
且 FEipber.elementType === ReactElLement .七 yP8 
则 复 用 


。 否则 新 建 


注意 : 复 用 过 程 是 调 

用 useriber(child，element .props) 创 
建新 的 fiber 对 象 , 这 

个 新 fiber 对 象 . stateNode = currentFirstChild.stateNc 
即 stateNode 属 性 得 到 了 复 用 , 故 DOM 节点 得 到 了 

复 用 . 


可 和 迭代 节点 比较 (数组 类 型 , [Symbol.iteraton]=fn， 


[@Qiteraton]=fn) 


可 适 代 世 操 比较 , 在 源码 中 被 分 为 了 2 个 部 分 : 


ETCETODn ECOnmCTIEGNO GO 本 罗 会 基 S 沪 
zeturnEipbper: Eliper， 
EYESmRIEESECNINTIOEERINSSE 尖 | 省 说 ON 
newChildq: anyyv 
anes: Lanesy， 

)EEIOe ID 间 硬 国法 | 
iiSAEaYIOEWwWGhnanEa) 到 | 

retutrn reconcilechildqrenArray ( 
zetuznEipber， 
SGIAaeI 
newChi1la， 
anesyv 
) ;7 
】 
If (getIteratorEn (newchiladq)) { 
retutrn reconcilechildrenIterator ( 
zeturnEipber， 
让 ETERIeSECInaIGF 
newChi1la， 
anesy 


) 7 


其 中 reconcilechildqrenarray 国 数 ( 针 对 数组 类 型 ) 
和 reconcilechildrenIterator( 针 对 可 友 代 类 型 ) 的 
核心 允 辑 几乎 一 致 , 下 文 将 分 

析 z*econcilechildqrenarray () 函数 . 如 果 是 新 增 节 
点 , 所 有 的 比较 逻辑 都 无 法 命中 , 只 有 对 比 更 新 过 程 ， 
才 有 实际 作用 , 所 以 下 文 重点 分 析 对 比 更 新 的 情 . 


function reconcilechildrenArtay ( 
zeturnEipber: Eiper， 
CSICESECNNNTOESERSSES ES 
newChildqren: ArEaYy<x*>y 
Janes: Lanesyv 

) 下 :EDOEEE 1 
| = mu 


Let PreviousNewEiber: Fiber | null = nul1; 


et olLldqFipbper = CurrentEirstChil1a，; 

et astPlacedqInadeXx = 0)， 

et PnewIaqX = 0)，; 

et nextOoldqFipber = mnul1; 

// 1. 第 一 次 循环 : 遍历 最 长 公共 序列 (key 相同) ， 公 # 
for () olqFiper !== null && newIGqX < newcCnh : 


// 后 文 分 析 


If (newIdqx === mnewChildqren.1Lengtnh) { 
// 如 果 newchildqren 序 列 被 遍历 完 ， 那 么 oldFibexz 
QqeleteRemainindCchildren (returnEipber，oldfi 


9 人 Sb 间 几 MeanEGRREeR 


If (olLlqEipbper === mul1lL) { 
// 如 果 olaqFipber 序 列 被 遍历 完 ， 那 么 newchildqren 
1 newIdqX < newchildqren.lLIendgth; newI 
后 文 分 析 
} 


Se 


人 --- 


Const existingchildren = mapRemainindCchildi 


// 2. 第 二 次 循环 : 电 历 剩余 非 公 共 序 列 ， 优 先 复 用 ol 


for () newIdqx < newCchildren.lLength;y newIdX:- 
If (shouldqTrackSidqeEftfects) { 


// newchildqren 已 经 遍历 完 ， 那 么 olaFipbetr 序 列 中 
exXistingCchildren.forEach(child => Qelete 


EeeSSDEE OBS 已 CN 


reconcilechildqrenaArray 国 数 源 码 看 似 很 长 , 梳理 
其 主干 之 后 , 其 实 非常 清 


通过 形 参 , 首先 明确 比较 对 象 
是 


CUTTentEIzStChild: 了 ipber nul1 和 newchildqren: Rr 


。 currentFirstchild: 是 一 个 fiber 下 点, 通 
过 fiber.sibling 可 以 将 兄弟 节点 全 部 遍历 出 
来 .所 以 可 以 将 currentFirstchildq 理 解 为 链表 
头 部 , 它 代 表 一 个 序列 , 源码 中 被 记 
为 olaFiber. 

。newchildqren: 是 一 个 数组 , 其 中 包含 了 若干 
ae 所 以 newchildren 也 代表 
一 个 序列 . 


所 以 reconcilechildqrenarray 实 际 就 是 2 个 序列 之 
间 的 比较 (链表 oldaFiber 和 数组 newchildren), 最 后 返 
回合 理 的 fibesr 序 列 . 


上 述 代 码 中 , 以 注释 分 割 线 为 界限 , 整个 核心 允 辑 分 
为 2 步骤 : 


一 次 循环 : 遍历 最 长 公共 序列 (key 相同 ), 公共 
序列 的 区 避 都 饮 为 可 复 用 


。 如果 newchilaren 序 列 被 遍历 完 , 那 
么 olaFfiber 序 列 中 剩余 万 点 都 视 为 删除 ( 打 
上 peletion 标 记 ) 

。 如 果 olafiber 序 列 被 遍历 完 , 那 
么 newchildren 序 列 中 剩余 节点 都 视 为 新 
增 ( 打 上 placement 标记 ) 

4. 第 二 次 循环 : 遍历 剩余 非 公 共 序列 , 优先 复 用 
oldFiber 序列 中 的 点 


。 在 对 比 更 新 阶段 ( 非 初次 创建 ftiber, 此 
时 shouldaTrracksideEffects 被 设置 为 
true). 第 二 次 循环 遍历 完成 之 
后 ，olafiber 序 列 中 没有 匹配 上 的 节点 都 
视 为 删除 (打上 peleticn 标 记 ) 
假设 有 如 下 图 所 示 2 个 初始 化 序列 : 


初始 序列 


astPlacedindex 


newindex 


接 下 来 第 一 次 循环 , 会 遍历 公共 序列 A,B, 生成 的 
fiber 节点 fiber(A) ，fiber(B) 可 以 复 用 . 


第 一 次 循环 (只 遍历 公共 序列 ) 


公共 序列 | 
fber 序 列 甸 表 AA C D E 
oldFiber 合 > Keyca ec Reysc key=d key=e 
汪汪 
ReactElement 序 列 。。 数组 A B E C X Y 
nawChidren 人 和 key=b key=e key=c Key=Xx key=y 
和 
复 用 复 用 

结果 序列 链表 上 B 

resutingFirstChid RE -key=b 


最 后 第 二 次 循环 , 会 遍历 剩余 序列 ea,c, x,Y: 


。 生成 的 fiber 节点 fiber(E)，fiber(c) 可 以 复 
用 . 其 中 fiber(c) 节 点 发 生 了 位 移 ( 打 
上 placement 标记). 

。 fiber(X)，fiber(Y) 是 新 增 ( 打 上 Placement 标 
井 ). 

。 同时 olafiper 序 列 中 的 fiber (D) 节点 确定 被 删 
除 (打上 peletion 标 记 ). 


第 二 次 循环 (遍历 简 余 序列 } 


了 3 
fos 
fear 序列 席 表 六 B C 医 
ber 人 key=a key=b key=c 劲 key=e 
剩余 序列 

ReactBemnent 序 列 ” ”数组 有 B 到 C X 时 
newChildren 全 key=a key=b Key=e key=c Key=X Key=y 
蔚 用 草 用 草 用 草 用 新 增 新 增 

结果 序列 锚 表 六 B 必 C X 
resuitingFirstChild 权 > key<a Rs“ Reyse eye “ ”key=x “ ”key=y 

， 
fabs 中 中 
Place Place Place 


整个 主干 逻辑 就 介绍 完了 , 接 下 来 贴 上 完整 源码 


第 一 次 循环 


// 1. 第 一 次 循环 : 遍历 最 长 公共 序列 (key 相同) ， 公共 请 
for () olqEFiper !== mnull && newIGqX < newChil 
If (olLlqEFipbper.inadqex > newIGX) 1{ 
nextOoldqFipbper = OoO1qFipbper，; 
四 汪 困 本 生 天 本 三 汪 阅 四 本 看 |W: 
} else { 
nextOldqFiber = olLldqFipbper.sipbpling; 
) 
// new 模 位 和 ol1dq 模 位 进行 比较 ， 如 果 key 不 同 ， 返 回 ni 
// key 相 同 ， 比 较 tyPe 是 否 一 致 .type 一 致 则 执行 uss 


Const newFiper = upaqateSlLot ( 
zetuznEiper， 
OldqFEiper， 
newchildren [newIQqX]， 
anesy 
) ;7 
If (newEipber === mul1lL) { 
// 如 果 返 回 nu11， 表明 key 不 同 . 无 法 满足 公共 序列 
If (olqEFipbpe === mul1lL) { 


oldFiper = nextOldqFiper，; 
】 


Dreak， 


If (ShoulLladqTrackSidqeEftfects) { 
// 各 是 新 增 节 点 ， 则 给 老 节 点 打上 Deletion 标 记 
If (olLqEFipbper && newEiper.alternate === nl 


Qqeletechild(zeturnEipber，olLldqFipbpe) ， 


// lastPlacedIndqex 记录 被 移动 的 节点 索引 
// 如 果 当 前 节点 可 复 用 ， 则 要 判断 位 置 是 否 移动 ， 


astPlacedqInaex = PlaceChild(newEiber， 1Last 


// 更 新 xesultingEFirstchildq 结 果 序 列 

If (PreViouSsNewEiber === nulL1L) 1{ 
reSsultingFirstCchildq = newEFiper，; 

} else { 
PtreviousNewEipber.sibling = mewEFiber) 

} 

PreViouSsSNewEFibper = mnewEiber，; 

oldFiper = mnextOldqFiper，; 


第 二 次 循环 


// 1. 将 第 一 次 循环 后 ，oldqFiber 剩 余 序 列 加 入 到 一 个 ma 


Const existingchildren = mapRemainingCchildtreri 


// 2. 第 二 次 循环 : 遍历 剩余 非 公 共 序列 ， 优先 复 用 o1dF': 
for () newIQGqxX < newCchiladqren.1LIengtnhy newIQX+ 二 ) 
Const newFiper = updateFromMap ( 
exXistingchildqreny 
zetuznEiper， 
newIQX，v 
newchildqren [newIQqX]， 
anesy 
) 7 
If (newEiber !== nulL1lL) 1{ 
JE EGGOTESEKESOOESR EEC 关于 
1IfE (newEipber.alternate !== mnul1) |{ 
// 如 果 newEiber 是 通过 复 用 创建 的 ， 则 清理 ma 


exlistindgdchildren.dqelete (newEiber.Kkey 


】 

astPlacedqInaex = PlaceChilad(newEiber， 1 
// 更 新 zxesultingEFirstchildq 结 果 序 列 

If (PreVviouSsNewEiber === mulL1L) { 


reSsultingFirstCchildq = newEFiper，; 


} else { 

PreviousNewEipber.sibling = newEiber，; 
} 
PrevViouSNewEFiber = mnewEiber，; 


】 
// 3. 善后 工作 ， 第 二 次 循环 完成 之 后 ， existingCchilc 
If (ShoulLlaTrackSidqeEftfects) { 


exXlistindgdCchildren.forEach(child => QqeletecCnh-: 


无 论 是 单 世 点 还 是 可 返 代 蔬 点 的 比较 , 最 终 的 目的 都 
是 生成 下 级 子 节点 . 并 在 *econcilechildren 过 程 
中 , 给 一 些 有 副作用 的 节点 (新 增 , 删除 , 移动 位 置 等 ) 
打上 副作用 标记 , 等 待 commit 阶段 (参考 fiber 树 泻 
染 ) 的 处 理 . 


/一 所 


本 蔬 介 绍 了 React 源码 中 ，fiber 构 造 循 环 阶段 用 于 
生成 下 级 子 世 点 的 reconcilechildren 了 图 数 ( 另 数 中 
的 算法 被 称 为 调和 算法 ), 并 演示 了 可 迭代 节点 比较 的 

图 解 示 例 . 该 算法 十 分 巧妙 , 其 核心 逻辑 

把 newchildren 序 列 分 为 2 步 遍历 , 先 遍历 公 共 序 列 ， 
再 思 历 非 公共 部 分 , 同时 复 用 olaFfiber 序 列 中 的 万 

一 | 


VSA。 


